CSS ile Web Sayfası Oluşturma – Sayfa 4 – Yazılım Bilişim Programlama
Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.
Öncelikle tasarımı inceleyip nerede hangi div etiketlerini kullanacağız ona karar vermeliyiz. Tasarıma geçmeden biraz inceleyip, tasarımın kaç parçadan oluştuğunu çıkarmalıyız. Görece olarak farklılık göstermesine rağmen ben 4 ana parçaya ayırdım.
Bir de küçük bir not. Oluşturacağımız site DIV etiketleri ile yapılacaktır. Tablosuz sayfa tasarımı yapacağız.
Tabi bu sayfaların içinde de gruplanmış başka div etiketlerini oluşturdum. Sayfanın taslağı şu şekilde oluştu.
Biraz daha detay eklediğimizde sayfanın hemen hemen tüm parçaları oluşturuldu.
Daha da fazla detaylandırılabilir ancak şimdilik bu bu kadar yeterli olacaktır. Sonraki sayfaya geçerek CSS Sayfa tasarımına başlayabiliriz.
Sayfa tasarımında kullanılacak görseller: css-site-tasarimi-resim indir
1.Adım: Her sayfada olması gereken temel kodları yazarak tasarıma başlıyoruz. Bu kodların yanında bir de tasarımda kullanmak için bir tane sitil dosyası oluşturup bağlantısını yapalım.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="tasarim.css" rel="stylesheet">
<title>YAZILIM BİLİŞİM</title>
</head>
<body>
………..
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="tasarim.css" rel="stylesheet">
<title>YAZILIM BİLİŞİM</title>
</head>
<body>
………..
</body>
</html>
2.Adım: 4 temel parçayı ve oluşturan div etiketlerini body içine yazıyoruz. Sadece alt bölümü dışarı aldım. Orta bölümün aşağı doğru tekrar etmesi durumunda arka plan oturmayacaktı. Body etiketi ve içindekiler şu şekilde oldu.
<body>
<div>
<div> ………. </div>
<div>……….</div>
<div>………</div>
</div>
<div>………</div>
</body>
<body>
<div>
<div> ………. </div>
<div>……….</div>
<div>………</div>
</div>
<div>………</div>
</body>
3.Adım: Üst kısıma site adı, slogan ve menü için gerekli divleri oluşturuyoruz.
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
4.Adım: Bu adımda site adını, sloganı ve menü (ul li a) için gerekli olan kodları yazarak devam edelim. Site ismi üzerine tıkladığımızda Giriş sayfasına gideceğini düşünürsek bu kısmın bir bağlantı olması gerekecektir. Üst kısım için gerekli kodlar şu şekilde oluşacaktır.
<div>
<div>
<a href="index.html">
<h2>YAZILIM BİLİŞİM</h2>
</a>
</div>
<div><p>Bir Tasarım Hikayesi</p></div>
<div>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="#">Ürünler</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Biz Kimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
<div>
<a href="index.html">
<h2>YAZILIM BİLİŞİM</h2>
</a>
</div>
<div><p>Bir Tasarım Hikayesi</p></div>
<div>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="#">Ürünler</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Biz Kimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</div>
Tasarım şu şekilde olacaktır. CSS kısmına geçtiğimizde görüntü çok daha iyi olacaktır.
5.Adım: Şu aşamada CSS tasarımı yapacağız. tasarim.css sayfasına geçip genel ve üst bölümün tasarımını yapıyoruz.
Body etiketinin varsayılan boşluklarını kaldırmak margin:0 yaptık. Sayfanın arka plan resmi ve arka plan rengini ayarlıyoruz..
Arka plan resmi sadece yatayda tekrar edeceği için repeat-x özelliğini de eklenir.
Link etiketlerinin altındaki çizgiyi kaldırmak için tüm a etiketlerinin alt çizgisini kaldırıyoruz.
Sayfa divinin genişliğini 980px yapıp soldan ve sağdan ortalı olmasını sağlıyoruz.
body{
margin:0;
padding:0;
background: url(resim/bg.png) repeat-x #e0e0df;
}
a{
text-decoration: none;
}
.sayfa{
width: 980px;
margin:auto;
}
body{
margin:0;
padding:0;
background: url(resim/bg.png) repeat-x #e0e0df;
}
a{
text-decoration: none;
}
.sayfa{
width: 980px;
margin:auto;
}
6.Adım: site adı etiketini sayfanın ortasında istediğimiz konuma getiriyoruz. Tasarımdaki gibi gölge görüntüsünü elde etmek içinse text-shadow özelliğini kullanarak gölge efekti veriyoruz.
/* .siteadi içindeki a onun içindeki h2 etiketi */
.siteadi a h2{
text-align: center;/*yazıyı ortala*/
margin:35px 0 0 0;
padding:0;
font-size:4em;
font-family: sans-serif;
color:#868686;
text-shadow: #4c4b4b -1px -1px,#fff 1px 1px;
}
/* .siteadi içindeki a onun içindeki h2 etiketi */
.siteadi a h2{
text-align: center;/*yazıyı ortala*/
margin:35px 0 0 0;
padding:0;
font-size:4em;
font-family: sans-serif;
color:#868686;
text-shadow: #4c4b4b -1px -1px,#fff 1px 1px;
}
7.Adım slogan görüntüsünü elde etmek için de aşağıdaki kodları yazarız. Kodlama yaparken bazı temel kodları tekrar tekrar yazdığımı farkettim. Tasarıma başlamadan önce css reset dökümanı kullanırsanız ya da oluşturursanız. Margin:0 padding:0 gibi kodları defalarca yazmak zorunda kalmazsınız.
.slogan p{
padding:0;
margin:0;
text-align: right;
padding-right: 240px;
color:#3376a6;
font-size: 1.2em;
font-family: sans-serif;
font-style: italic;
}
.slogan p{
padding:0;
margin:0;
text-align: right;
padding-right: 240px;
color:#3376a6;
font-size: 1.2em;
font-family: sans-serif;
font-style: italic;
}
8.Adım: Menünün tasarımı için öncelikle menünün hizasını ayarlıyoruz.
Ul etiketinin başındaki madde imlerini kaldırmak için list-style değerini kaldırıyoruz. Ul etiketinin varsayılan iç ve dış boluklarını kaldırmak için margin ve padding değerlerini de kaldırıyoruz.
Sonra eşit aralıklarla menü etiketlerini(li) sola hizalı olarak(float:left) dağıtıyoruz. Linklerin yanında bulunan çizgileri border olarak ekliyoruz. Yalnız ilk ve son etiketteki kenarlıkları kaldırmak gerekiyor. bunun için sözde etiket kullanmak gerekiyor. li:first-child li:last child etiketlerini kullanarak gerekli düzenlemeleri yapıyoruz.
Link(a) etiketi içinde bulunduğu alanı tamamen kaplaması için display özelliğini block yapıyoruz. Mavi alanı tamamen kaplaması için sabit yükseklik verip, verdiğim sabit yükseklik değeri kadar satır yüksekliği değeri veriyorum. Diğer ayarlamalar ekrandaki yazı şekline ait olan ayarlamalar.
Belki linkerin üzerine geldiğimizde farklılık elde etmek isteyebiliriz. Bunun içinde a:hover seçicisini kullanıyoruz.
.ust-menu{
margin-top:26px;
}
.ust-menu ul{
list-style: none;
margin:0;
padding:0;
}
.ust-menu ul li{
float: left;
border-left:#a8c5de solid 1px;
border-right:#92afc8 solid 1px;
}
.ust-menu ul li:first-child{
border-left:none;
}
.ust-menu ul li:last-child{
border-right:none;
}
.ust-menu ul li a{
display: block;
height: 50px;
line-height: 50px;
padding:0 40px;
font-size: 1.2em;
font-family: sans-serif;
color:#fff;
}
.ust-menu ul li a:hover{
background: #336fa4;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.ust-menu{
margin-top:26px;
}
.ust-menu ul{
list-style: none;
margin:0;
padding:0;
}
.ust-menu ul li{
float: left;
border-left:#a8c5de solid 1px;
border-right:#92afc8 solid 1px;
}
.ust-menu ul li:first-child{
border-left:none;
}
.ust-menu ul li:last-child{
border-right:none;
}
.ust-menu ul li a{
display: block;
height: 50px;
line-height: 50px;
padding:0 40px;
font-size: 1.2em;
font-family: sans-serif;
color:#fff;
}
.ust-menu ul li a:hover{
background: #336fa4;
}
Görüntü şekildeki gibi oluşacaktır.
9.Adım: Slider paneli için sadece alanın yüksekliğini ayarlayıp içine bir tane resim ekleyeceğiz. Tasarım bittikten sonra bir tane jquery slider ekleriz.
***Menü içindeki li etiketlerini sola hizalı yaptığımız için slider ile menü arasına temizle adında bir tane div atıp buna clear both ekleyip daha yukarı kaymayı engelliyoruz.
<div></div>
<div>
<img src="resim/slider.png">
</div>
<div></div>
<div>
<img src="resim/slider.png">
</div>
.slider{
height: 338px;
text-align: center;
}
/*tasarımın en altına koyarsanız daha iyi olur*/
.temizle{
clear: both;
}
.slider{
height: 338px;
text-align: center;
}
/*tasarımın en altına koyarsanız daha iyi olur*/
.temizle{
clear: both;
}
10.Adım: Orta kısımda sol ve sağ bölümler bulunmakta. Sol kısımdaki etiketleri oluşturuyoruz.
<div>
<div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
</div>
<div> .........</div>
</div>
<div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div>
<div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
</div>
<div> .........</div>
</div>
<div></div>
11.Adım: sol ve sağ kısım için gerekli CSS düzenlemesini yapıp ürün tasarımı tasarımdaki gibi yapıyoruz. Toplam genişliğin 980px olduğunu hatırlayarak genişlik değerini veriyoruz. Yan yana gelmeleri için float:left değerini de ekliyoruz. (Not: alt bölümle orta bölüm arasıda temizle etiketi eklemeyi unutmayın)
Ürün resmi ürün başlığının solunda ve ürün başlığının hemen altında ürün detayı görünüyor. Ürün detayının sonda da daha fazla linki bulunmaktadır.
.orta-sol{
width: 680px;
float:left;
}
.urun{
padding:10px ;
background: #d8f2be;
margin:10px 10px 0 0;
}
.urun-resim{
float:left;
margin:0 10px 10px 0;
}
.urun-baslik{
margin:0px;
font-family: sans-serif;
font-size: 1.6em;
color:#4a6f55;
}
.urun-ozet{
margin-top:10px;
font-family: sans-serif;
font-size: 1em;
line-height: 1.6em;
color:#5e7b67;
}
.urun-ozet a{
color:#207eae;
}
.orta-sag{
float:left;
width: 300px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.orta-sol{
width: 680px;
float:left;
}
.urun{
padding:10px ;
background: #d8f2be;
margin:10px 10px 0 0;
}
.urun-resim{
float:left;
margin:0 10px 10px 0;
}
.urun-baslik{
margin:0px;
font-family: sans-serif;
font-size: 1.6em;
color:#4a6f55;
}
.urun-ozet{
margin-top:10px;
font-family: sans-serif;
font-size: 1em;
line-height: 1.6em;
color:#5e7b67;
}
.urun-ozet a{
color:#207eae;
}
.orta-sag{
float:left;
width: 300px;
}
Ekran görüntüsü aşağıdaki gibi olacaktır.
resim
12.Adım: Sağ kısımda bulunan paneller için orta bir panel başlığı ve panel bölümü oluşturup farklı çalışmalarda kullanmak mümkün olacaktır. Aşağıdaki şekilde panelin Popüler Ürünler için bir panel galeri için 2. Paneli oluşturuyoruz. 2. Panel Jquery kullanarak resim gösterme paneli olacak. Şimdilik bir tane resim eklemek yeterli olacaktır.
HTML:
<div>
<div>
<div>
<h3>POPÜLER ÜRÜNLER</h3>
</div>
<div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
</div>
</div>
<div>
<div>
<h3>GALERİ</h3>
</div>
<div>
<div >
<img src="resim/resim.png">
</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div>
<div>
<div>
<h3>POPÜLER ÜRÜNLER</h3>
</div>
<div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
</div>
</div>
<div>
<div>
<h3>GALERİ</h3>
</div>
<div>
<div >
<img src="resim/resim.png">
</div>
</div>
</div>
</div>
CSS:
.panel{
background: #fcb8b8;
margin:10px 0 10px 10px;
}
.panel-baslik{
background: #fc5151;
}
.panel-baslik h3{
margin:0px;
height: 50px;
line-height: 50px;
text-align: center;
font-family: sans-serif;
color:#fff;
font-weight: 400;
}
.panel-bolum .populer{
border-bottom:#fc5151 solid 1px;
padding-bottom:10px;
margin:0 10px 0 10px;
}
.panel-bolum .populer img{
padding:0 10px 10px 0;
float:left;
width: 90px;
}
.panel-bolum .populer h4{
color:#fff;
font-family: sans-serif;
line-height: 30px;
font-weight: 400;
font-size: 1em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.panel{
background: #fcb8b8;
margin:10px 0 10px 10px;
}
.panel-baslik{
background: #fc5151;
}
.panel-baslik h3{
margin:0px;
height: 50px;
line-height: 50px;
text-align: center;
font-family: sans-serif;
color:#fff;
font-weight: 400;
}
.panel-bolum .populer{
border-bottom:#fc5151 solid 1px;
padding-bottom:10px;
margin:0 10px 0 10px;
}
.panel-bolum .populer img{
padding:0 10px 10px 0;
float:left;
width: 90px;
}
.panel-bolum .populer h4{
color:#fff;
font-family: sans-serif;
line-height: 30px;
font-weight: 400;
font-size: 1em;
}
13.Adım: alt kısmı oluştururken hemen üzerindeki kırmızı alanı kenarlık olarak yapıp, alanın ortalanması için içine .ortala adında bir div ekliyorum. Sonrada sol ve sağ bölümler içinde yaptığım gibi sola ve sağa hizalamalar ile alt kısmı oluşturuyorum.
HTML:
<div></div>
<div>
<div>
<div>
<div>
<h3>Popüler Ürünler</h3>
<ul>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
</ul>
</div>
<div>
<h3>Sosyal</h3>
<ul>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
</ul>
</div>
</div>
<div>x</div>
</div>
<div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div></div>
<div>
<div>
<div>
<div>
<h3>Popüler Ürünler</h3>
<ul>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
</ul>
</div>
<div>
<h3>Sosyal</h3>
<ul>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
</ul>
</div>
</div>
<div>x</div>
</div>
<div></div>
</div>
CSS:
.alt{
border-top:#e64d53 solid 10px;
background: #e0e0df;
padding:10px 0 50px 0;
}
.ortala{
width: 980px;
margin:auto;
}
.alt-sol{
width: 480px;
float:left;
}
.alt-sag{
width: 480px;
float:right;
}
.bolum-1,.bolum-2{
float: left;
width: 230px;
}
.alt-sol h3,.alt-sol ul a{
font-family: sans-serif;
color:#e64d53;
}
.alt-sol ul{
list-style: none;
padding:0;
margin:0;
}
.alt-sol ul li{
padding:5px 0 5px 0;
}
.alt-sol ul a{
text-decoration: none;
}
.alt-sol .alt-menu li{
padding-left:20px;
background: url(resim/nokta.png) no-repeat 0 7px;
}
.alt-sol .sosyal-menu img{
width: 80px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.alt{
border-top:#e64d53 solid 10px;
background: #e0e0df;
padding:10px 0 50px 0;
}
.ortala{
width: 980px;
margin:auto;
}
.alt-sol{
width: 480px;
float:left;
}
.alt-sag{
width: 480px;
float:right;
}
.bolum-1,.bolum-2{
float: left;
width: 230px;
}
.alt-sol h3,.alt-sol ul a{
font-family: sans-serif;
color:#e64d53;
}
.alt-sol ul{
list-style: none;
padding:0;
margin:0;
}
.alt-sol ul li{
padding:5px 0 5px 0;
}
.alt-sol ul a{
text-decoration: none;
}
.alt-sol .alt-menu li{
padding-left:20px;
background: url(resim/nokta.png) no-repeat 0 7px;
}
.alt-sol .sosyal-menu img{
width: 80px;
}
14.Adım: alt bölümdeki sağ kısmı oluşturmak için gerekli olan html ve css kodları
HTML:
<div>
<div>
<form>
<div>
<label for="mail">MAIL</label>
<input type="text" name="mail">
</div>
<div>
<label for="gorus">GÖRÜŞ</label>
<textarea name="gorus"></textarea>
</div>
<div>
<input type="submit" value="KAYDET">
</div>
</form>
</div>
<div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<div>
<form>
<div>
<label for="mail">MAIL</label>
<input type="text" name="mail">
</div>
<div>
<label for="gorus">GÖRÜŞ</label>
<textarea name="gorus"></textarea>
</div>
<div>
<input type="submit" value="KAYDET">
</div>
</form>
</div>
<div></div>
</div>
CSS:
.alt-sag{
position: relative;
background: #e64d53;
margin-top:-10px;
}
.alt-sag::after{
position: absolute;
content: "";
border-top:30px solid #efa6a9;
border-right:30px solid #efa6a9;
border-bottom:30px solid #e0e0df;
border-left:30px solid #e0e0df;
bottom:0px;
}
.gorus-form label{
text-align: right;
float:left;
width: 100px;
padding: 5px 10px 0 0;
font-size: 1.2em;
color:#fff;
font-family: sans-serif;
}
.gorus-form input[type="text"],.gorus-form textarea{
width: 300px;
padding:10px;
background: #efa6a9;
border:none;
}
.gorus-form textarea{
height: 150px;
}
.gorus-form input[type="submit"]{
background: #93dc61;
float: right;
padding:10px;
border:none;
margin-bottom:50px;
}
.form-satir{
padding:20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.alt-sag{
position: relative;
background: #e64d53;
margin-top:-10px;
}
.alt-sag::after{
position: absolute;
content: "";
border-top:30px solid #efa6a9;
border-right:30px solid #efa6a9;
border-bottom:30px solid #e0e0df;
border-left:30px solid #e0e0df;
bottom:0px;
}
.gorus-form label{
text-align: right;
float:left;
width: 100px;
padding: 5px 10px 0 0;
font-size: 1.2em;
color:#fff;
font-family: sans-serif;
}
.gorus-form input[type="text"],.gorus-form textarea{
width: 300px;
padding:10px;
background: #efa6a9;
border:none;
}
.gorus-form textarea{
height: 150px;
}
.gorus-form input[type="submit"]{
background: #93dc61;
float: right;
padding:10px;
border:none;
margin-bottom:50px;
}
.form-satir{
padding:20px;
}
15.Adım: bazı etiketlerde font-family, margin, padding değerleri ortak olduğu için bir araya toplanıp CSS dosyası boyutu kısaltılabilir.
CSS ile WEB SAYFASI TASARIMINI INDIRIN : HTML SAYFA TASARIMI
Beğendim!
İlgili
www.yazilimbilisim.net
CSS ile Web Sayfası Oluşturma – Sayfa 3 – Yazılım Bilişim Programlama
Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.
Öncelikle tasarımı inceleyip nerede hangi div etiketlerini kullanacağız ona karar vermeliyiz. Tasarıma geçmeden biraz inceleyip, tasarımın kaç parçadan oluştuğunu çıkarmalıyız. Görece olarak farklılık göstermesine rağmen ben 4 ana parçaya ayırdım.
Bir de küçük bir not. Oluşturacağımız site DIV etiketleri ile yapılacaktır. Tablosuz sayfa tasarımı yapacağız.
Tabi bu sayfaların içinde de gruplanmış başka div etiketlerini oluşturdum. Sayfanın taslağı şu şekilde oluştu.
Biraz daha detay eklediğimizde sayfanın hemen hemen tüm parçaları oluşturuldu.
Daha da fazla detaylandırılabilir ancak şimdilik bu bu kadar yeterli olacaktır. Sonraki sayfaya geçerek CSS Sayfa tasarımına başlayabiliriz.
Sayfa tasarımında kullanılacak görseller: css-site-tasarimi-resim indir
1.Adım: Her sayfada olması gereken temel kodları yazarak tasarıma başlıyoruz. Bu kodların yanında bir de tasarımda kullanmak için bir tane sitil dosyası oluşturup bağlantısını yapalım.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="tasarim.css" rel="stylesheet">
<title>YAZILIM BİLİŞİM</title>
</head>
<body>
………..
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="tasarim.css" rel="stylesheet">
<title>YAZILIM BİLİŞİM</title>
</head>
<body>
………..
</body>
</html>
2.Adım: 4 temel parçayı ve oluşturan div etiketlerini body içine yazıyoruz. Sadece alt bölümü dışarı aldım. Orta bölümün aşağı doğru tekrar etmesi durumunda arka plan oturmayacaktı. Body etiketi ve içindekiler şu şekilde oldu.
<body>
<div>
<div> ………. </div>
<div>……….</div>
<div>………</div>
</div>
<div>………</div>
</body>
<body>
<div>
<div> ………. </div>
<div>……….</div>
<div>………</div>
</div>
<div>………</div>
</body>
3.Adım: Üst kısıma site adı, slogan ve menü için gerekli divleri oluşturuyoruz.
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
4.Adım: Bu adımda site adını, sloganı ve menü (ul li a) için gerekli olan kodları yazarak devam edelim. Site ismi üzerine tıkladığımızda Giriş sayfasına gideceğini düşünürsek bu kısmın bir bağlantı olması gerekecektir. Üst kısım için gerekli kodlar şu şekilde oluşacaktır.
<div>
<div>
<a href="index.html">
<h2>YAZILIM BİLİŞİM</h2>
</a>
</div>
<div><p>Bir Tasarım Hikayesi</p></div>
<div>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="#">Ürünler</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Biz Kimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
<div>
<a href="index.html">
<h2>YAZILIM BİLİŞİM</h2>
</a>
</div>
<div><p>Bir Tasarım Hikayesi</p></div>
<div>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="#">Ürünler</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Biz Kimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
</div>
Tasarım şu şekilde olacaktır. CSS kısmına geçtiğimizde görüntü çok daha iyi olacaktır.
5.Adım: Şu aşamada CSS tasarımı yapacağız. tasarim.css sayfasına geçip genel ve üst bölümün tasarımını yapıyoruz.
Body etiketinin varsayılan boşluklarını kaldırmak margin:0 yaptık. Sayfanın arka plan resmi ve arka plan rengini ayarlıyoruz..
Arka plan resmi sadece yatayda tekrar edeceği için repeat-x özelliğini de eklenir.
Link etiketlerinin altındaki çizgiyi kaldırmak için tüm a etiketlerinin alt çizgisini kaldırıyoruz.
Sayfa divinin genişliğini 980px yapıp soldan ve sağdan ortalı olmasını sağlıyoruz.
body{
margin:0;
padding:0;
background: url(resim/bg.png) repeat-x #e0e0df;
}
a{
text-decoration: none;
}
.sayfa{
width: 980px;
margin:auto;
}
body{
margin:0;
padding:0;
background: url(resim/bg.png) repeat-x #e0e0df;
}
a{
text-decoration: none;
}
.sayfa{
width: 980px;
margin:auto;
}
6.Adım: site adı etiketini sayfanın ortasında istediğimiz konuma getiriyoruz. Tasarımdaki gibi gölge görüntüsünü elde etmek içinse text-shadow özelliğini kullanarak gölge efekti veriyoruz.
/* .siteadi içindeki a onun içindeki h2 etiketi */
.siteadi a h2{
text-align: center;/*yazıyı ortala*/
margin:35px 0 0 0;
padding:0;
font-size:4em;
font-family: sans-serif;
color:#868686;
text-shadow: #4c4b4b -1px -1px,#fff 1px 1px;
}
/* .siteadi içindeki a onun içindeki h2 etiketi */
.siteadi a h2{
text-align: center;/*yazıyı ortala*/
margin:35px 0 0 0;
padding:0;
font-size:4em;
font-family: sans-serif;
color:#868686;
text-shadow: #4c4b4b -1px -1px,#fff 1px 1px;
}
7.Adım slogan görüntüsünü elde etmek için de aşağıdaki kodları yazarız. Kodlama yaparken bazı temel kodları tekrar tekrar yazdığımı farkettim. Tasarıma başlamadan önce css reset dökümanı kullanırsanız ya da oluşturursanız. Margin:0 padding:0 gibi kodları defalarca yazmak zorunda kalmazsınız.
.slogan p{
padding:0;
margin:0;
text-align: right;
padding-right: 240px;
color:#3376a6;
font-size: 1.2em;
font-family: sans-serif;
font-style: italic;
}
.slogan p{
padding:0;
margin:0;
text-align: right;
padding-right: 240px;
color:#3376a6;
font-size: 1.2em;
font-family: sans-serif;
font-style: italic;
}
8.Adım: Menünün tasarımı için öncelikle menünün hizasını ayarlıyoruz.
Ul etiketinin başındaki madde imlerini kaldırmak için list-style değerini kaldırıyoruz. Ul etiketinin varsayılan iç ve dış boluklarını kaldırmak için margin ve padding değerlerini de kaldırıyoruz.
Sonra eşit aralıklarla menü etiketlerini(li) sola hizalı olarak(float:left) dağıtıyoruz. Linklerin yanında bulunan çizgileri border olarak ekliyoruz. Yalnız ilk ve son etiketteki kenarlıkları kaldırmak gerekiyor. bunun için sözde etiket kullanmak gerekiyor. li:first-child li:last child etiketlerini kullanarak gerekli düzenlemeleri yapıyoruz.
Link(a) etiketi içinde bulunduğu alanı tamamen kaplaması için display özelliğini block yapıyoruz. Mavi alanı tamamen kaplaması için sabit yükseklik verip, verdiğim sabit yükseklik değeri kadar satır yüksekliği değeri veriyorum. Diğer ayarlamalar ekrandaki yazı şekline ait olan ayarlamalar.
Belki linkerin üzerine geldiğimizde farklılık elde etmek isteyebiliriz. Bunun içinde a:hover seçicisini kullanıyoruz.
.ust-menu{
margin-top:26px;
}
.ust-menu ul{
list-style: none;
margin:0;
padding:0;
}
.ust-menu ul li{
float: left;
border-left:#a8c5de solid 1px;
border-right:#92afc8 solid 1px;
}
.ust-menu ul li:first-child{
border-left:none;
}
.ust-menu ul li:last-child{
border-right:none;
}
.ust-menu ul li a{
display: block;
height: 50px;
line-height: 50px;
padding:0 40px;
font-size: 1.2em;
font-family: sans-serif;
color:#fff;
}
.ust-menu ul li a:hover{
background: #336fa4;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.ust-menu{
margin-top:26px;
}
.ust-menu ul{
list-style: none;
margin:0;
padding:0;
}
.ust-menu ul li{
float: left;
border-left:#a8c5de solid 1px;
border-right:#92afc8 solid 1px;
}
.ust-menu ul li:first-child{
border-left:none;
}
.ust-menu ul li:last-child{
border-right:none;
}
.ust-menu ul li a{
display: block;
height: 50px;
line-height: 50px;
padding:0 40px;
font-size: 1.2em;
font-family: sans-serif;
color:#fff;
}
.ust-menu ul li a:hover{
background: #336fa4;
}
Görüntü şekildeki gibi oluşacaktır.
9.Adım: Slider paneli için sadece alanın yüksekliğini ayarlayıp içine bir tane resim ekleyeceğiz. Tasarım bittikten sonra bir tane jquery slider ekleriz.
***Menü içindeki li etiketlerini sola hizalı yaptığımız için slider ile menü arasına temizle adında bir tane div atıp buna clear both ekleyip daha yukarı kaymayı engelliyoruz.
<div></div>
<div>
<img src="resim/slider.png">
</div>
<div></div>
<div>
<img src="resim/slider.png">
</div>
.slider{
height: 338px;
text-align: center;
}
/*tasarımın en altına koyarsanız daha iyi olur*/
.temizle{
clear: both;
}
.slider{
height: 338px;
text-align: center;
}
/*tasarımın en altına koyarsanız daha iyi olur*/
.temizle{
clear: both;
}
10.Adım: Orta kısımda sol ve sağ bölümler bulunmakta. Sol kısımdaki etiketleri oluşturuyoruz.
<div>
<div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
</div>
<div> .........</div>
</div>
<div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div>
<div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
<div>
<img src="resim/resim.png">
<h3>ÜRÜN BAŞLIĞI</h3>
<div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div>
<div></div>
</div>
</div>
<div> .........</div>
</div>
<div></div>
11.Adım: sol ve sağ kısım için gerekli CSS düzenlemesini yapıp ürün tasarımı tasarımdaki gibi yapıyoruz. Toplam genişliğin 980px olduğunu hatırlayarak genişlik değerini veriyoruz. Yan yana gelmeleri için float:left değerini de ekliyoruz. (Not: alt bölümle orta bölüm arasıda temizle etiketi eklemeyi unutmayın)
Ürün resmi ürün başlığının solunda ve ürün başlığının hemen altında ürün detayı görünüyor. Ürün detayının sonda da daha fazla linki bulunmaktadır.
.orta-sol{
width: 680px;
float:left;
}
.urun{
padding:10px ;
background: #d8f2be;
margin:10px 10px 0 0;
}
.urun-resim{
float:left;
margin:0 10px 10px 0;
}
.urun-baslik{
margin:0px;
font-family: sans-serif;
font-size: 1.6em;
color:#4a6f55;
}
.urun-ozet{
margin-top:10px;
font-family: sans-serif;
font-size: 1em;
line-height: 1.6em;
color:#5e7b67;
}
.urun-ozet a{
color:#207eae;
}
.orta-sag{
float:left;
width: 300px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.orta-sol{
width: 680px;
float:left;
}
.urun{
padding:10px ;
background: #d8f2be;
margin:10px 10px 0 0;
}
.urun-resim{
float:left;
margin:0 10px 10px 0;
}
.urun-baslik{
margin:0px;
font-family: sans-serif;
font-size: 1.6em;
color:#4a6f55;
}
.urun-ozet{
margin-top:10px;
font-family: sans-serif;
font-size: 1em;
line-height: 1.6em;
color:#5e7b67;
}
.urun-ozet a{
color:#207eae;
}
.orta-sag{
float:left;
width: 300px;
}
Ekran görüntüsü aşağıdaki gibi olacaktır.
resim
12.Adım: Sağ kısımda bulunan paneller için orta bir panel başlığı ve panel bölümü oluşturup farklı çalışmalarda kullanmak mümkün olacaktır. Aşağıdaki şekilde panelin Popüler Ürünler için bir panel galeri için 2. Paneli oluşturuyoruz. 2. Panel Jquery kullanarak resim gösterme paneli olacak. Şimdilik bir tane resim eklemek yeterli olacaktır.
HTML:
<div>
<div>
<div>
<h3>POPÜLER ÜRÜNLER</h3>
</div>
<div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
</div>
</div>
<div>
<div>
<h3>GALERİ</h3>
</div>
<div>
<div >
<img src="resim/resim.png">
</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div>
<div>
<div>
<h3>POPÜLER ÜRÜNLER</h3>
</div>
<div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
<div>
<a href="#">
<img src="resim/resim.png">
<h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4>
</a>
<div></div>
</div>
</div>
</div>
<div>
<div>
<h3>GALERİ</h3>
</div>
<div>
<div >
<img src="resim/resim.png">
</div>
</div>
</div>
</div>
CSS:
.panel{
background: #fcb8b8;
margin:10px 0 10px 10px;
}
.panel-baslik{
background: #fc5151;
}
.panel-baslik h3{
margin:0px;
height: 50px;
line-height: 50px;
text-align: center;
font-family: sans-serif;
color:#fff;
font-weight: 400;
}
.panel-bolum .populer{
border-bottom:#fc5151 solid 1px;
padding-bottom:10px;
margin:0 10px 0 10px;
}
.panel-bolum .populer img{
padding:0 10px 10px 0;
float:left;
width: 90px;
}
.panel-bolum .populer h4{
color:#fff;
font-family: sans-serif;
line-height: 30px;
font-weight: 400;
font-size: 1em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.panel{
background: #fcb8b8;
margin:10px 0 10px 10px;
}
.panel-baslik{
background: #fc5151;
}
.panel-baslik h3{
margin:0px;
height: 50px;
line-height: 50px;
text-align: center;
font-family: sans-serif;
color:#fff;
font-weight: 400;
}
.panel-bolum .populer{
border-bottom:#fc5151 solid 1px;
padding-bottom:10px;
margin:0 10px 0 10px;
}
.panel-bolum .populer img{
padding:0 10px 10px 0;
float:left;
width: 90px;
}
.panel-bolum .populer h4{
color:#fff;
font-family: sans-serif;
line-height: 30px;
font-weight: 400;
font-size: 1em;
}
13.Adım: alt kısmı oluştururken hemen üzerindeki kırmızı alanı kenarlık olarak yapıp, alanın ortalanması için içine .ortala adında bir div ekliyorum. Sonrada sol ve sağ bölümler içinde yaptığım gibi sola ve sağa hizalamalar ile alt kısmı oluşturuyorum.
HTML:
<div></div>
<div>
<div>
<div>
<div>
<h3>Popüler Ürünler</h3>
<ul>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
</ul>
</div>
<div>
<h3>Sosyal</h3>
<ul>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
</ul>
</div>
</div>
<div>x</div>
</div>
<div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div></div>
<div>
<div>
<div>
<div>
<h3>Popüler Ürünler</h3>
<ul>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
<li><a href="#">Ürün Başlığı</a></li>
</ul>
</div>
<div>
<h3>Sosyal</h3>
<ul>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
<li><a href="#"><img src="resim/resim.png"></a></li>
</ul>
</div>
</div>
<div>x</div>
</div>
<div></div>
</div>
CSS:
.alt{
border-top:#e64d53 solid 10px;
background: #e0e0df;
padding:10px 0 50px 0;
}
.ortala{
width: 980px;
margin:auto;
}
.alt-sol{
width: 480px;
float:left;
}
.alt-sag{
width: 480px;
float:right;
}
.bolum-1,.bolum-2{
float: left;
width: 230px;
}
.alt-sol h3,.alt-sol ul a{
font-family: sans-serif;
color:#e64d53;
}
.alt-sol ul{
list-style: none;
padding:0;
margin:0;
}
.alt-sol ul li{
padding:5px 0 5px 0;
}
.alt-sol ul a{
text-decoration: none;
}
.alt-sol .alt-menu li{
padding-left:20px;
background: url(resim/nokta.png) no-repeat 0 7px;
}
.alt-sol .sosyal-menu img{
width: 80px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.alt{
border-top:#e64d53 solid 10px;
background: #e0e0df;
padding:10px 0 50px 0;
}
.ortala{
width: 980px;
margin:auto;
}
.alt-sol{
width: 480px;
float:left;
}
.alt-sag{
width: 480px;
float:right;
}
.bolum-1,.bolum-2{
float: left;
width: 230px;
}
.alt-sol h3,.alt-sol ul a{
font-family: sans-serif;
color:#e64d53;
}
.alt-sol ul{
list-style: none;
padding:0;
margin:0;
}
.alt-sol ul li{
padding:5px 0 5px 0;
}
.alt-sol ul a{
text-decoration: none;
}
.alt-sol .alt-menu li{
padding-left:20px;
background: url(resim/nokta.png) no-repeat 0 7px;
}
.alt-sol .sosyal-menu img{
width: 80px;
}
14.Adım: alt bölümdeki sağ kısmı oluşturmak için gerekli olan html ve css kodları
HTML:
<div>
<div>
<form>
<div>
<label for="mail">MAIL</label>
<input type="text" name="mail">
</div>
<div>
<label for="gorus">GÖRÜŞ</label>
<textarea name="gorus"></textarea>
</div>
<div>
<input type="submit" value="KAYDET">
</div>
</form>
</div>
<div></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<div>
<form>
<div>
<label for="mail">MAIL</label>
<input type="text" name="mail">
</div>
<div>
<label for="gorus">GÖRÜŞ</label>
<textarea name="gorus"></textarea>
</div>
<div>
<input type="submit" value="KAYDET">
</div>
</form>
</div>
<div></div>
</div>
CSS:
.alt-sag{
position: relative;
background: #e64d53;
margin-top:-10px;
}
.alt-sag::after{
position: absolute;
content: "";
border-top:30px solid #efa6a9;
border-right:30px solid #efa6a9;
border-bottom:30px solid #e0e0df;
border-left:30px solid #e0e0df;
bottom:0px;
}
.gorus-form label{
text-align: right;
float:left;
width: 100px;
padding: 5px 10px 0 0;
font-size: 1.2em;
color:#fff;
font-family: sans-serif;
}
.gorus-form input[type="text"],.gorus-form textarea{
width: 300px;
padding:10px;
background: #efa6a9;
border:none;
}
.gorus-form textarea{
height: 150px;
}
.gorus-form input[type="submit"]{
background: #93dc61;
float: right;
padding:10px;
border:none;
margin-bottom:50px;
}
.form-satir{
padding:20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.alt-sag{
position: relative;
background: #e64d53;
margin-top:-10px;
}
.alt-sag::after{
position: absolute;
content: "";
border-top:30px solid #efa6a9;
border-right:30px solid #efa6a9;
border-bottom:30px solid #e0e0df;
border-left:30px solid #e0e0df;
bottom:0px;
}
.gorus-form label{
text-align: right;
float:left;
width: 100px;
padding: 5px 10px 0 0;
font-size: 1.2em;
color:#fff;
font-family: sans-serif;
}
.gorus-form input[type="text"],.gorus-form textarea{
width: 300px;
padding:10px;
background: #efa6a9;
border:none;
}
.gorus-form textarea{
height: 150px;
}
.gorus-form input[type="submit"]{
background: #93dc61;
float: right;
padding:10px;
border:none;
margin-bottom:50px;
}
.form-satir{
padding:20px;
}
15.Adım: bazı etiketlerde font-family, margin, padding değerleri ortak olduğu için bir araya toplanıp CSS dosyası boyutu kısaltılabilir.
CSS ile WEB SAYFASI TASARIMINI INDIRIN : HTML SAYFA TASARIMI
Beğendim!
İlgili
www.yazilimbilisim.net
html - CSS Floating Footer?
.container {
width: 964px;
}
#footer {
background-color: #000000;
height: auto;
margin-top: 0px;
bottom: 0px;
}
#footer-container {
background-color: #000000;
}
#footer-container #footer {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/footer-logo.png") no-repeat scroll 20px 23px #000;
padding-bottom: 49px;
}
#footer .top {
border-bottom: 1px solid #7F7F7F;
margin-left: 82px;
padding-bottom: 16px;
padding-top: 33px;
}
#footer .text-logo {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/text-logo.png") no-repeat croll 0 0 transparent;
float: left;
height: 28px;
width: 176px;
}
#footer .slogan {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/slogan.png") no-repeat scroll 0 0 transparent;
float: right;
height: 12px;
margin-top: 14px;
width: 259px;
background-color: #000000;
}
#footer .links {
float: left;
margin-left: 81px;
margin-top: 13px;
}
#footer .links a {
color: #fff;
}
#footer .links li {
font-size: 12px;
font-weight: bold;
margin-bottom: 13px;
text-decoration: underline;
}
#footer .social {
float: right;
margin-left: 37px;
margin-right: 5px;
margin-top: 14px;
}
#footer .social li {
margin-bottom: 7px;
text-decoration: underline;
}
#footer .social a {
color: #FFFFFF;
font-size: 12px;
padding-left: 26px;
}
#footer .social .facebook {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px 4px transparent;
}
#footer .social .twitter {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px -20px transparent;
}
#footer .social .youtube {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -42px transparent;
padding-left: 15px;
}
#footer .social .itunes {
background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -66px transparent;
padding-left: 15px;
}
#footer .updated {
clear: right;
color: #9B9B9B;
float: right;
font-size: 10px;
margin-top: 14px;
}
#footer-container ul li {
text-align: left
} <div align="center" background-color="#000000" ;>
<div>
<div>
<a href="http://www.me.com/">
<div></div>
</a>
<div></div>
</div>
<ul>
<li><a href="/faqs.htm">Frequently Asked Questions</a>
</li>
<li><a href="/aboutus/website-policies.htm">Website Policies</a>
</li>
<li><a href="/contacts.htm">Contact Us</a>
</li>
</ul>
<ul>
<li><a href="http://www.youtube.com/user/Mywebsite">YouTube</a>
</li>
<li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtistLegacy?cc=us&id=216751324">iTunes</a>
</li>
</ul>
<ul>
<li><a href="http://www.facebook.com/mywebsite">Facebook</a>
</li>
<li><a href="http://twitter.com/mywebsite">Twitter</a>
</li>
</ul>
<div>
<p>Last Updated: 03/06/2015</p>
</div>
</div>
<!--! end of #footer-->
</div>
<!--! end of #footer-container --> stackoverflow.com
Responsive facebook style homepage, registration and login design with twitter bootstrap 3.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Responsive facebook like homepage, Registration and login with twitter bootstrap 3.0 - wsnippets.com</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div>
<div>
<div>
<div>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
<span></span>
<span></span>
</button>
<a href="http://wsnippets.com">wsnippets.com</a>
</div>
<div>
<form role="form">
<div>
<div>
<label for="exampleInputEmail2">Email or Phone</label>
<input type="email" placeholder="Email or Phone">
</div>
<div>
<label for="exampleInputPassword2">Password</label>
<input type="password" placeholder="Password">
</div>
<div>
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</div>
<div>
<div>
<div>
<h4>
Facebook helps you connect and share with the people in your life.
</h4>
<img src="img/background.png" />
</div>
<div>
<form action="#" method="post" role="form">
<legend><a>Create your account</a></legend>
<h5>It's free and always will be.</h5>
<div>
<div>
<input name="firstname" placeholder="First Name" type="text" autofocus />
</div>
<div>
<input name="lastname" placeholder="Last Name" type="text" />
</div>
</div>
<input name="youremail" placeholder="Your Email" type="email" />
<input name="reenteremail" placeholder="Re-enter Email" type="email" />
<input name="password" placeholder="New Password" type="password" />
<label for="">
Birth Date</label>
<div>
<div>
<select>
<option value="Month">Month</option>
</select>
</div>
<div>
<select>
<option value="Day">Day</option>
</select>
</div>
<div>
<select>
<option value="Year">Year</option>
</select>
</div>
</div>
<label>
<input type="radio" name="sex" value="male" />
Male
</label>
<label>
<input type="radio" name="sex" value="female" />
Female
</label>
<br />
<span>By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>
<button type="submit">
Create my account</button>
</form>
</div>
</div>
</div>
</div>
<div>
<div>
<p><a href="http://wsnippets.com">WSnippets.com</a></p>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
wsnippets.com
HTML div and span tags
Tags are great for displaying whatever content you need -- like the <p> tag for paragraphs, or the <img> tag for images. But what if you need to group a tag or a set of tags inside one container to create some kind of relationship on a webpage? Like a set of links and an image for a menu, or all the text on the page for the content.
This tutorial focuses on:
- Grouping content
- The <div> tag
- The <span> tag
- Div vs. Span
- div, span, and CSS
Grouping content
Grouping of content is one of those things that happens behind the scenes at a website. You see a webpage, but you do not know how the author of that webpage set up relationships between the various items on the page. Doing so is important for styling as well as for a logical organization.
On this webpage, we have five containers that group together a set of elements:
- Header The top part of this page. It contains the site name, slogan, search box, and top menu.
- Left side navigation The left side of this page. It contains the menu for this sites content.
- Content The center of this page. It contains the actual content of the page.
- Right side navigation The right side of this page. It contains some more of the menu for this sites content, the things we could not fit on the left side.
- Footer The footer of this page. It contains links that are generally reserved for the footer of a webpage such as 'copyright information', 'terms of use', and a copyright statement and a few images related to the validation of the construction of this webpage.
The <div> tag
The <div> tag is a container for a group of elements. It is not seen on a webpage, but works behind the scenes to organize the layout of a webpage a certain way.
Div is a block-level element which means that it will automatically begin on a new line in the browser. This is opposed to inline elements which continue on the same line.
Example to illustrate the difference between block level and inline elements:<p>The a tag is an inline element. We will display two links. Notice how they continue on the same line next to each other</p> <a href="#">This is a link</a> <a href="#">This is another link</a> <p>The p tag is a block-level element. Notice how it begins on a new line, apart from the link</p>
Output:The a tag is an inline element. We will display two links. Notice how they continue on the same line next to each other This is a link This is another link The p tag is a block-level element. Notice how it automatically begins on a new line, apart from the link NOTE: Browsers will automatically place a line break before and after a div element.
NOTE: You cannot include the <div> tag inside the <p> tag.
Attributes of the <div> tag - id - Denotes a unique name for the container.
- class - Denotes what class this container belongs to (This attribute as well as id is used for styling purposes. For more on styling, read our HTML stylesheets page or our CSS tutorials)
- style - Sets a set of styles using for this container such as background color, font size, and border color.
- Deprecated. align - Sets how content will be aligned inside the container. Possible values include "left, "right", "center", or "justify"
Example:<div> <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> </div>
In the above example, we placed a set of related links in a <div> called 'menu'
We can now give our menu it's own unique background color to differentiate it from the rest of the page. We'll use the style attribute for this:
<div > <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> </div>
In the above example, the background color differentiates the menu from the rest of the page in some way. This makes it clear that this is not just some links on the page, but a set of elements that have some kind of relationship within that container. It is this grouping of content that makes it easier for the user to navigate a webpage, and understand what is what.
The <span> tag
The <span> tag is similar to but different from the <div> tag. Unlike the <div> tag for which the browser will place a line break before and after a div element, there is no such formatting for the <span> tag.
While the <div> tag should be used for grouping a set of related elements to create a relationship between them on a webpage, the <span> tag should be used to change the style of something on a webpage without affecting the context it is within.
NOTE: Div is a block-level element, while span is an inline element.
Attributes of the <span> tag - id - Denotes a unique name for this span element.
- class - Denotes what class this span element belongs to (This attribute as well as id is used for styling purposes. For more on styling, read our HTML stylesheets page or our CSS tutorials)
- style - Sets a set of styles using CSS attributes for this span element such as background color, font size, and border color.
Example:<p> stands for Hyper Text Markup Language</p>
Output:HTML stands for Hyper Text Markup Language
Notice how only the word 'HTML' is blue and bold in the above example. This is because we set it that way using the <span> tag. The <span> tag is effective this way because it can be used to change just part of an element instead of that entire element.
div vs. span
The <div> tag should be used to separate the contents of a webpage into several parts based on the relationships between the elements on the webpage. The <div> tag should be used for grouping content. Use the <div> tag for things such as columns in a layout, and the location of a menu on a page. The <span> tag should be used to change the style of something on a webpage without affecting the context it is within.
div, span, and CSS
Not just for grouping sets of related tags or setting apart individual elements on a webpage, the <div> and <span> tags are actually an integral part of styling the layout of webpages.
The <div> tag is used much more than the <span> tag, but the <span> tag still plays an important role in building webpages.
An entire page using div and span:<html> <head> <title>div and span layout</title> </head> <body> </body> </html>
In the above example, we create a layout with two columns with various styling. We divide the page into two columns (leftMenu and rightMenu) using the <div> tag, and we use the <span> tag to change the color of two words.
The <div> tags divide the page into two columns (one column is a menu for the page and the other column is the page's content). The styling we used is in CSS commands. CSS is a separate language, to learn more about it check out our CSS tutorials. To learn more about using tags to apply a set of styles to a webpage check out HTML stylesheets page.
www.landofcode.com
Tasarim-Sepeti tr.gg Tasarimlari - Blog Tasarımı
Blog Teması
Tasarımın Üstündeki Metin:
<div> <h2><a href="SİTE URL GİR" _fcksavedurl="SİTE URL GİR">SİTE SLOGAN GİR</a></h2> <h3><span>SİTE ALT SLOGAN GİR</span></h3> <div> <ul> <li><a href="ANASAYFA URL GİR" _fcksavedurl="ANASAYFA URL GİR">Anasayfa</a></li> <li><a href="HAKKIMDA BÖLÜM URL'Sİ GİR" _fcksavedurl="HAKKIMDA BÖLÜM URL'Sİ GİR" title="Hakkımda Bilgiler">Hakkımda</a></li> </ul> </div> </div> <div> <div> <h4>SİTE BAŞLIĞI GİR</h4>
Tasarımın Altındaki Yazı:<div> <div> ALT SLOGAN GİR </div> </div> <div> <a href="#" _fcksavedurl="#"></a> <a href="#" _fcksavedurl="#"></a> </div> </div> <div> <div> <form method="get" action="http://www.google.com.tr/"> <p><input value="Arayacağın Terimler..." name="s" onfocus_fckprotectedatt="%20onfocus%3D%22if(this.value%3D%3D'Arayaca%26%23287%3B%26%23305%3Bn%20Terimler...')this.value%3D''%22" onblur_fckprotectedatt="%20onblur%3D%22if(this.value%3D%3D'')this.value%3D'Arayaca%26%23287%3B%26%23305%3Bn%20Terimler...'%22" type="text"> <input value="ARA" type="submit"></p> </form> </div> <div> <h4>Kategoriler</h4> <ul> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> <ul> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> </li> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> <ul> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> </li> </ul> </li> </ul> </li> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> </li> </ul> </div> <div> <h4>Yazılar</h4> <ul> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> </ul> </div> <div> <h4>HOŞGELDİNİZ</h4> <img src="" _fcksavedurl="" alt=""> <p>Merhaba, bloguma hoşgeldiniz.Umarım blogumu beğenirsiniz...</p> </div> <div> <h4>Ekstralar</h4> <ul> <li><a href="BAŞLIK GİR" _fcksavedurl="BAŞLIK GİR">BAŞLIK GİR</a></li> <li><a href="BAŞLIK GİR" _fcksavedurl="BAŞLIK GİR" title="">BAŞLIK GİR <abbr title=""></abbr></a></li> <li><a href="BAŞLIK GİR" _fcksavedurl="BAŞLIK GİR"><abbr title="">BAŞLIK GİR</abbr></a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR" title="">BAŞLIK GİR</a></li> </ul> </div> </div> </div> <div> <div><a href="" _fcksavedurl=""><img src="" _fcksavedurl="" alt=""></a></div> <div> <p> Sitelere Özel Tasarım Yapılır. <a href="" _fcksavedurl=""> Fiyatı 5 TL'dir. </a> | <a href="" _fcksavedurl="">Tasarım İletişim</a> <a href="" _fcksavedurl=""></a> </p> <p>Copyright By MHD © 2013. Her Hakkı Saklıdır. | <a href="http://tr-gg-css-king.tr.gg/" _fcksavedurl="http://tr-gg-css-king.tr.gg/"> Tasarımı Hazırlayan</a></p> </div></div>
CSS Kodu:
h2#title{display: none;} h3#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} /* Theme Name: japan-style Description: japan-style Wordpress Theme by<a href="http://blog.gooddesignweb.com/" _fcksavedurl="http://blog.gooddesignweb.com/">Good Design Web</a> Version: 1.1 Author: Good Design Web Author URI: http://blog.gooddesignweb.com/ Tags: fixed width, two columns, right sidebar, valid XHTML, valid CSS */ /* Reset -------------------------------------------------------------------*/ * { padding: 0; margin: 0; } ul li, ol li { list-style: none; list-style-position: inside; } ol ol, ul ul, ol ul, ul ol { margin-left: 20px; margin-bottom: 0; } img { border: none; } /* Body -------------------------------------------------------------------*/ body { font: 12px/18px Verdana, Helvetica, Arial, Geneva, sans-serif; color: #333; background: #DED5BA; } h2, h3, h4, h5, h5, h6 { font-family: "Trebuchet MS", Helvetica, Arial, Geneva, Sans-Serif; color: #414d4c; } h2 { font-size: 22px; line-height: 26px; margin-bottom: 10px; } h3 { font-size: 12px; line-height: 24px; margin-bottom: 7px; font-weight: normal; } h4 { font-size: 18px; line-height: 22px; margin-bottom: 5px; } h5 { font-size: 16px; line-height: 20px; margin-bottom: 5px; } h5 { font-size: 14px; line-height: 18px; margin-bottom: 5px; } h6 { font-size: 12px; line-height: 16px; margin-bottom: 5px; } h2 span { color: #999; } a { color: #3b5a4a; } a:hover { color: #3b5a4a; } a:visited { color: #3b5a4a; } p { margin-bottom: 10px; } input, textarea { font: 12px Verdana, Helvetica, Arial, Geneva, sans-serif; } blockquote { font: italic 14px/22px Georgia, Serif; padding: 5px 10px; margin-bottom: 20px; background: #e4ede2; } /* Header -------------------------------------------------------------------*/ #header { width: 960px; height: 300px; margin: 0 auto; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/header_bg.jpg) no-repeat center; position: relative; } #header h2 { width: 230px; position: absolute; top: 80px; left: 160px; font: 20px Verdana; padding-top: 10px; margin-bottom: 0; color: #fff; } #header h2 a { color: #333; text-decoration: none; } #header span { position: absolute; top: 195px; left: 150px; padding-left: 10px; font-size: 12px; color: #333; } /* Container -------------------------------------------------------------------*/ #wrapper { width: 900px; overflow: hidden; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/container_bg.jpg) repeat-y; margin: 0 auto; } /* Navigation -------------------------------------------------------------------*/ #navi { width: 800px; height: 45px; margin-left: 30px; position: relative; top: 225px; } #navi ul { margin-left: 10px; position: absolute; bottom: -1px; overflow: hidden; height: 45px; } #navi ul li { float: left; margin-right: 3px; padding-left: 3px; font-weight: bold; } #navi ul li.current_page_item { width: 122px; height: 45px; } #navi ul li a { width: 122px; height: 45px; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/nav_bg.jpg) no-repeat; display: block; text-decoration: none; color: #333; line-height: 45px; text-align: center; } #navi ul li a:hover { color: #555; } #navi ul li.current_page_item a { background: url(http://wp-themes.com/wp-content/themes/japan-style/images/nav_bg.jpg) no-repeat; color: #ff0000; } /* Content -------------------------------------------------------------------*/ #conttent { width: 600px; float: left; padding: 15px; } #conttent .post { margin-bottom: 40px; } #conttent .post p { margin-bottom: 20px; } #conttent .post h4 a { text-decoration: none; font-size: 20px; padding-left: 20px; } #conttent .post-list li { list-style: none; } #conttent .post .post-info { clear: both; font-size: 11px; color: #777; padding: 15px 5px 5px 5px; margin-bottom: 20px; text-align: right; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/meta_bg.gif) top center no-repeat; } #conttent .post .post-info a { color: #333; text-decoration:none; } #conttent .post .post-info a:hover { color: #555; text-decoration:none; } #conttent #pages { text-align: center; } #conttent #pages a { font: bold 20px "Trebuchet MS"; color: #414d4c; text-decoration: none; } #conttent #pages a:hover { color: #1e2726; } #conttent ul, ol, dl { margin-bottom: 20px; } #conttent ul { list-style: disc; list-style-position: inside; } #conttent ol { list-style: decimal; list-style-position: inside; } #conttent dl dt { font-weight: bold; } #conttent dl dd { font-style: italic; margin: 0 0 5px 20px; color: #555; } .aligncenter { margin-left: auto; margin-right: auto; } .alignleft { float: left; margin: 5px 15px 10px 0; } .alignright { float: right; margin: 5px 0 10px 15px; } /* Sidebar -------------------------------------------------------------------*/ #sidebar { width: 235px; float: right; font-size: 11px; margin: 0 10px 10px 0; color: #555; } #sidebar h4 { font: normal 18px Verdana, Arial, Sans-Serif; color: #444; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/sidetitle_bg.gif) no-repeat; padding-left: 23px; } #sidebar a { color: #38463e; text-decoration: none; } #sidebar a:hover { color: #38463e; } #sidebar .block { width: 205px; padding: 15px; border-bottom: 1px solid #bfccbf; overflow: hidden; color: #555; } #sidebar .block li { background: url(http://wp-themes.com/wp-content/themes/japan-style/images/arrow.gif) no-repeat 2px 8px; padding-left: 12px; } #sidebar .block a:hover { color: #777; } /* Calendar */ #sidebar .block #calendar_wrap a { } #sidebar .block #calendar_wrap .pad { background: none; } #sidebar .block #calendar_wrap #prev { background: none; } #sidebar .block #calendar_wrap #next { background: none; } #sidebar .block #calendar_wrap table { width: 100%; margin: 0;padding: 0;} #sidebar .block #calendar_wrap table th { width: 14.2%; } #sidebar .block #calendar_wrap table td { width: 14.2%; background: #d6ded4; text-align: center; color: #888; } /* Search -------------------------------------------------------------------*/ #search { } #search input { border: 0; } #search #s { width: 150px; height: 26px; padding: 3px 0 4px 5px; margin-right: -4px; vertical-align: top; line-height: 0; font: normal 12px Verdana; vertical-align: top; color: #333; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/search_bg.jpg) no-repeat; } #search #searchsubmit { width: 56px; height: 26px; text-align: center; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/searchbt_bg.jpg) no-repeat; font-weight: bold; } .bt{ cursor: pointer; } /* Comments -------------------------------------------------------------------*/ .comments-title { text-align: center; font: bold 17px "Trebuchet MS", Helvetica, Arial, Geneva; color: #414d4c; } #comments .comment { background: #E7E8EB; margin-bottom: 10px; overflow: hidden; width: 600px; padding-bottom: 5px; } #comments .comment .comment-avatar { float: left; width: 50px; padding: 5px 7px; } #comments .comment .comment-content { float: left; padding: 10px 15px; margin: 5px 5px 0 0; width: 500px; background: #F7F8F9; } #comments .comment .comment-content a { color: #444; } #comments .comment .comment-info { font-size: 11px; color: #777; margin-bottom: 5px; } #comments .comment .comment-info span { font: bold 16px "Trebuchet MS", Helvetica, Arial, Geneva; padding-right: 10px; margin-bottom: 5px; } #comments .comment .comment-info a { color: #444; text-decoration: none; } /* Comment Form -------------------------------------------------------------------*/ #commentform { background: #F7F8F9; border: 5px solid #E7E8EB; padding: 10px; color: #555; } #commentform p { margin-bottom: 7px; } #commentform textarea { width: 565px; border: 1px solid #aaa; height: 120px; } #commentform input.text { width: 150px; border: 1px solid #aaa; margin-right: 5px; padding: 3px 3px; } #commentform input#submit { width: 148px; height: 30px; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/submit_bg.gif) no-repeat; text-align: center; border: none; } /* Footer -------------------------------------------------------------------*/ #footer { width: 960px; height: 295px; margin: 0 auto; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/footer_bg.jpg) no-repeat; position: relative; } .rss { float: right; width: 200px; height: 73px; } #footer-inner { clear: both; text-align: center; width: 900px; margin: 0 auto; padding-top: 10px; } #footer p { font-size: 11px; margin: 0; } #footer a { color: #ff0000; } aksaray haber
tasarim-sepeti.tr.gg
Смотрите также
CSS ile Web Sayfası Oluşturma – Sayfa 4 – Yazılım Bilişim Programlama
Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.
Öncelikle tasarımı inceleyip nerede hangi div etiketlerini kullanacağız ona karar vermeliyiz. Tasarıma geçmeden biraz inceleyip, tasarımın kaç parçadan oluştuğunu çıkarmalıyız. Görece olarak farklılık göstermesine rağmen ben 4 ana parçaya ayırdım.
Bir de küçük bir not. Oluşturacağımız site DIV etiketleri ile yapılacaktır. Tablosuz sayfa tasarımı yapacağız.
Tabi bu sayfaların içinde de gruplanmış başka div etiketlerini oluşturdum. Sayfanın taslağı şu şekilde oluştu.
Biraz daha detay eklediğimizde sayfanın hemen hemen tüm parçaları oluşturuldu.
Daha da fazla detaylandırılabilir ancak şimdilik bu bu kadar yeterli olacaktır. Sonraki sayfaya geçerek CSS Sayfa tasarımına başlayabiliriz.
Sayfa tasarımında kullanılacak görseller: css-site-tasarimi-resim indir
1.Adım: Her sayfada olması gereken temel kodları yazarak tasarıma başlıyoruz. Bu kodların yanında bir de tasarımda kullanmak için bir tane sitil dosyası oluşturup bağlantısını yapalım.
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="tasarim.css" rel="stylesheet"> <title>YAZILIM BİLİŞİM</title> </head> <body> ……….. </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="tasarim.css" rel="stylesheet"> <title>YAZILIM BİLİŞİM</title> </head> <body> ……….. </body> </html>
|
2.Adım: 4 temel parçayı ve oluşturan div etiketlerini body içine yazıyoruz. Sadece alt bölümü dışarı aldım. Orta bölümün aşağı doğru tekrar etmesi durumunda arka plan oturmayacaktı. Body etiketi ve içindekiler şu şekilde oldu.
<body> <div> <div> ………. </div> <div>……….</div> <div>………</div> </div> <div>………</div> </body>
<body> <div> <div> ………. </div> <div>……….</div> <div>………</div> </div> <div>………</div> </body>
|
3.Adım: Üst kısıma site adı, slogan ve menü için gerekli divleri oluşturuyoruz.
<div> <div></div> <div></div> <div></div> </div>
<div> <div></div> <div></div> <div></div> </div>
|
4.Adım: Bu adımda site adını, sloganı ve menü (ul li a) için gerekli olan kodları yazarak devam edelim. Site ismi üzerine tıkladığımızda Giriş sayfasına gideceğini düşünürsek bu kısmın bir bağlantı olması gerekecektir. Üst kısım için gerekli kodlar şu şekilde oluşacaktır.
<div> <div> <a href="index.html"> <h2>YAZILIM BİLİŞİM</h2> </a> </div> <div><p>Bir Tasarım Hikayesi</p></div> <div> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Biz Kimiz</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div> <div> <a href="index.html"> <h2>YAZILIM BİLİŞİM</h2> </a> </div> <div><p>Bir Tasarım Hikayesi</p></div> <div> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Biz Kimiz</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </div>
|
Tasarım şu şekilde olacaktır. CSS kısmına geçtiğimizde görüntü çok daha iyi olacaktır.
5.Adım: Şu aşamada CSS tasarımı yapacağız. tasarim.css sayfasına geçip genel ve üst bölümün tasarımını yapıyoruz.
Body etiketinin varsayılan boşluklarını kaldırmak margin:0 yaptık. Sayfanın arka plan resmi ve arka plan rengini ayarlıyoruz..
Arka plan resmi sadece yatayda tekrar edeceği için repeat-x özelliğini de eklenir.
Link etiketlerinin altındaki çizgiyi kaldırmak için tüm a etiketlerinin alt çizgisini kaldırıyoruz.
Sayfa divinin genişliğini 980px yapıp soldan ve sağdan ortalı olmasını sağlıyoruz.
body{ margin:0; padding:0; background: url(resim/bg.png) repeat-x #e0e0df; } a{ text-decoration: none; } .sayfa{ width: 980px; margin:auto; }
body{ margin:0; padding:0; background: url(resim/bg.png) repeat-x #e0e0df; } a{ text-decoration: none; } .sayfa{ width: 980px; margin:auto; }
|
6.Adım: site adı etiketini sayfanın ortasında istediğimiz konuma getiriyoruz. Tasarımdaki gibi gölge görüntüsünü elde etmek içinse text-shadow özelliğini kullanarak gölge efekti veriyoruz.
/* .siteadi içindeki a onun içindeki h2 etiketi */ .siteadi a h2{ text-align: center;/*yazıyı ortala*/ margin:35px 0 0 0; padding:0; font-size:4em; font-family: sans-serif; color:#868686; text-shadow: #4c4b4b -1px -1px,#fff 1px 1px; }
/* .siteadi içindeki a onun içindeki h2 etiketi */ .siteadi a h2{ text-align: center;/*yazıyı ortala*/ margin:35px 0 0 0; padding:0; font-size:4em; font-family: sans-serif; color:#868686; text-shadow: #4c4b4b -1px -1px,#fff 1px 1px; }
|
7.Adım slogan görüntüsünü elde etmek için de aşağıdaki kodları yazarız. Kodlama yaparken bazı temel kodları tekrar tekrar yazdığımı farkettim. Tasarıma başlamadan önce css reset dökümanı kullanırsanız ya da oluşturursanız. Margin:0 padding:0 gibi kodları defalarca yazmak zorunda kalmazsınız.
.slogan p{ padding:0; margin:0; text-align: right; padding-right: 240px; color:#3376a6; font-size: 1.2em; font-family: sans-serif; font-style: italic; }
.slogan p{ padding:0; margin:0; text-align: right; padding-right: 240px; color:#3376a6; font-size: 1.2em; font-family: sans-serif; font-style: italic; }
|
8.Adım: Menünün tasarımı için öncelikle menünün hizasını ayarlıyoruz.
Ul etiketinin başındaki madde imlerini kaldırmak için list-style değerini kaldırıyoruz. Ul etiketinin varsayılan iç ve dış boluklarını kaldırmak için margin ve padding değerlerini de kaldırıyoruz.
Sonra eşit aralıklarla menü etiketlerini(li) sola hizalı olarak(float:left) dağıtıyoruz. Linklerin yanında bulunan çizgileri border olarak ekliyoruz. Yalnız ilk ve son etiketteki kenarlıkları kaldırmak gerekiyor. bunun için sözde etiket kullanmak gerekiyor. li:first-child li:last child etiketlerini kullanarak gerekli düzenlemeleri yapıyoruz.
Link(a) etiketi içinde bulunduğu alanı tamamen kaplaması için display özelliğini block yapıyoruz. Mavi alanı tamamen kaplaması için sabit yükseklik verip, verdiğim sabit yükseklik değeri kadar satır yüksekliği değeri veriyorum. Diğer ayarlamalar ekrandaki yazı şekline ait olan ayarlamalar.
Belki linkerin üzerine geldiğimizde farklılık elde etmek isteyebiliriz. Bunun içinde a:hover seçicisini kullanıyoruz.
.ust-menu{ margin-top:26px; } .ust-menu ul{ list-style: none; margin:0; padding:0; } .ust-menu ul li{ float: left; border-left:#a8c5de solid 1px; border-right:#92afc8 solid 1px; } .ust-menu ul li:first-child{ border-left:none; } .ust-menu ul li:last-child{ border-right:none; } .ust-menu ul li a{ display: block; height: 50px; line-height: 50px; padding:0 40px; font-size: 1.2em; font-family: sans-serif; color:#fff; } .ust-menu ul li a:hover{ background: #336fa4; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.ust-menu{ margin-top:26px; }
.ust-menu ul{ list-style: none; margin:0; padding:0; }
.ust-menu ul li{ float: left; border-left:#a8c5de solid 1px; border-right:#92afc8 solid 1px; }
.ust-menu ul li:first-child{ border-left:none; }
.ust-menu ul li:last-child{ border-right:none; }
.ust-menu ul li a{ display: block; height: 50px; line-height: 50px; padding:0 40px; font-size: 1.2em; font-family: sans-serif; color:#fff; }
.ust-menu ul li a:hover{ background: #336fa4; }
|
Görüntü şekildeki gibi oluşacaktır.
9.Adım: Slider paneli için sadece alanın yüksekliğini ayarlayıp içine bir tane resim ekleyeceğiz. Tasarım bittikten sonra bir tane jquery slider ekleriz.
***Menü içindeki li etiketlerini sola hizalı yaptığımız için slider ile menü arasına temizle adında bir tane div atıp buna clear both ekleyip daha yukarı kaymayı engelliyoruz.
<div></div> <div> <img src="resim/slider.png"> </div>
<div></div> <div> <img src="resim/slider.png"> </div>
|
.slider{ height: 338px; text-align: center; } /*tasarımın en altına koyarsanız daha iyi olur*/ .temizle{ clear: both; }
.slider{ height: 338px; text-align: center; }
/*tasarımın en altına koyarsanız daha iyi olur*/
.temizle{ clear: both; }
|
10.Adım: Orta kısımda sol ve sağ bölümler bulunmakta. Sol kısımdaki etiketleri oluşturuyoruz.
<div> <div> <div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div> <div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div> </div> <div> .........</div> </div> <div></div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div> <div>
<div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div>
<div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div>
</div> <div> .........</div>
</div> <div></div>
|
11.Adım: sol ve sağ kısım için gerekli CSS düzenlemesini yapıp ürün tasarımı tasarımdaki gibi yapıyoruz. Toplam genişliğin 980px olduğunu hatırlayarak genişlik değerini veriyoruz. Yan yana gelmeleri için float:left değerini de ekliyoruz. (Not: alt bölümle orta bölüm arasıda temizle etiketi eklemeyi unutmayın)
Ürün resmi ürün başlığının solunda ve ürün başlığının hemen altında ürün detayı görünüyor. Ürün detayının sonda da daha fazla linki bulunmaktadır.
.orta-sol{ width: 680px; float:left; } .urun{ padding:10px ; background: #d8f2be; margin:10px 10px 0 0; } .urun-resim{ float:left; margin:0 10px 10px 0; } .urun-baslik{ margin:0px; font-family: sans-serif; font-size: 1.6em; color:#4a6f55; } .urun-ozet{ margin-top:10px; font-family: sans-serif; font-size: 1em; line-height: 1.6em; color:#5e7b67; } .urun-ozet a{ color:#207eae; } .orta-sag{ float:left; width: 300px; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.orta-sol{ width: 680px; float:left; }
.urun{ padding:10px ; background: #d8f2be; margin:10px 10px 0 0; }
.urun-resim{ float:left; margin:0 10px 10px 0; }
.urun-baslik{ margin:0px; font-family: sans-serif; font-size: 1.6em; color:#4a6f55; }
.urun-ozet{ margin-top:10px; font-family: sans-serif; font-size: 1em; line-height: 1.6em; color:#5e7b67; }
.urun-ozet a{ color:#207eae; }
.orta-sag{ float:left; width: 300px; }
|
Ekran görüntüsü aşağıdaki gibi olacaktır.
resim
12.Adım: Sağ kısımda bulunan paneller için orta bir panel başlığı ve panel bölümü oluşturup farklı çalışmalarda kullanmak mümkün olacaktır. Aşağıdaki şekilde panelin Popüler Ürünler için bir panel galeri için 2. Paneli oluşturuyoruz. 2. Panel Jquery kullanarak resim gösterme paneli olacak. Şimdilik bir tane resim eklemek yeterli olacaktır.
HTML:
<div> <div> <div> <h3>POPÜLER ÜRÜNLER</h3> </div> <div> <div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div> <div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div> </div> </div> <div> <div> <h3>GALERİ</h3> </div> <div> <div > <img src="resim/resim.png"> </div> </div> </div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div> <div> <div> <h3>POPÜLER ÜRÜNLER</h3> </div> <div>
<div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div>
<div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div>
</div> </div>
<div> <div> <h3>GALERİ</h3> </div> <div> <div > <img src="resim/resim.png"> </div>
</div> </div> </div>
|
CSS:
.panel{ background: #fcb8b8; margin:10px 0 10px 10px; } .panel-baslik{ background: #fc5151; } .panel-baslik h3{ margin:0px; height: 50px; line-height: 50px; text-align: center; font-family: sans-serif; color:#fff; font-weight: 400; } .panel-bolum .populer{ border-bottom:#fc5151 solid 1px; padding-bottom:10px; margin:0 10px 0 10px; } .panel-bolum .populer img{ padding:0 10px 10px 0; float:left; width: 90px; } .panel-bolum .populer h4{ color:#fff; font-family: sans-serif; line-height: 30px; font-weight: 400; font-size: 1em; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.panel{ background: #fcb8b8; margin:10px 0 10px 10px; }
.panel-baslik{ background: #fc5151; }
.panel-baslik h3{ margin:0px; height: 50px; line-height: 50px; text-align: center; font-family: sans-serif; color:#fff; font-weight: 400; }
.panel-bolum .populer{ border-bottom:#fc5151 solid 1px; padding-bottom:10px; margin:0 10px 0 10px; }
.panel-bolum .populer img{ padding:0 10px 10px 0; float:left; width: 90px; }
.panel-bolum .populer h4{ color:#fff; font-family: sans-serif; line-height: 30px; font-weight: 400; font-size: 1em; }
|
13.Adım: alt kısmı oluştururken hemen üzerindeki kırmızı alanı kenarlık olarak yapıp, alanın ortalanması için içine .ortala adında bir div ekliyorum. Sonrada sol ve sağ bölümler içinde yaptığım gibi sola ve sağa hizalamalar ile alt kısmı oluşturuyorum.
HTML:
<div></div> <div> <div> <div> <div> <h3>Popüler Ürünler</h3> <ul> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> </ul> </div> <div> <h3>Sosyal</h3> <ul> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> </ul> </div> </div> <div>x</div> </div> <div></div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div></div> <div> <div> <div> <div> <h3>Popüler Ürünler</h3> <ul> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> </ul> </div> <div> <h3>Sosyal</h3> <ul> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> </ul> </div> </div> <div>x</div>
</div>
<div></div> </div>
|
CSS:
.alt{ border-top:#e64d53 solid 10px; background: #e0e0df; padding:10px 0 50px 0; } .ortala{ width: 980px; margin:auto; } .alt-sol{ width: 480px; float:left; } .alt-sag{ width: 480px; float:right; } .bolum-1,.bolum-2{ float: left; width: 230px; } .alt-sol h3,.alt-sol ul a{ font-family: sans-serif; color:#e64d53; } .alt-sol ul{ list-style: none; padding:0; margin:0; } .alt-sol ul li{ padding:5px 0 5px 0; } .alt-sol ul a{ text-decoration: none; } .alt-sol .alt-menu li{ padding-left:20px; background: url(resim/nokta.png) no-repeat 0 7px; } .alt-sol .sosyal-menu img{ width: 80px; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.alt{ border-top:#e64d53 solid 10px; background: #e0e0df; padding:10px 0 50px 0; }
.ortala{ width: 980px; margin:auto; }
.alt-sol{ width: 480px; float:left; } .alt-sag{ width: 480px; float:right; } .bolum-1,.bolum-2{ float: left; width: 230px; } .alt-sol h3,.alt-sol ul a{ font-family: sans-serif; color:#e64d53; }
.alt-sol ul{ list-style: none; padding:0; margin:0; } .alt-sol ul li{ padding:5px 0 5px 0; }
.alt-sol ul a{ text-decoration: none; } .alt-sol .alt-menu li{ padding-left:20px; background: url(resim/nokta.png) no-repeat 0 7px; } .alt-sol .sosyal-menu img{ width: 80px; }
|
14.Adım: alt bölümdeki sağ kısmı oluşturmak için gerekli olan html ve css kodları
HTML:
<div> <div> <form> <div> <label for="mail">MAIL</label> <input type="text" name="mail"> </div> <div> <label for="gorus">GÖRÜŞ</label> <textarea name="gorus"></textarea> </div> <div> <input type="submit" value="KAYDET"> </div> </form> </div> <div></div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div> <div> <form> <div> <label for="mail">MAIL</label> <input type="text" name="mail"> </div> <div> <label for="gorus">GÖRÜŞ</label> <textarea name="gorus"></textarea> </div> <div> <input type="submit" value="KAYDET"> </div> </form> </div> <div></div> </div>
|
CSS:
.alt-sag{ position: relative; background: #e64d53; margin-top:-10px; } .alt-sag::after{ position: absolute; content: ""; border-top:30px solid #efa6a9; border-right:30px solid #efa6a9; border-bottom:30px solid #e0e0df; border-left:30px solid #e0e0df; bottom:0px; } .gorus-form label{ text-align: right; float:left; width: 100px; padding: 5px 10px 0 0; font-size: 1.2em; color:#fff; font-family: sans-serif; } .gorus-form input[type="text"],.gorus-form textarea{ width: 300px; padding:10px; background: #efa6a9; border:none; } .gorus-form textarea{ height: 150px; } .gorus-form input[type="submit"]{ background: #93dc61; float: right; padding:10px; border:none; margin-bottom:50px; } .form-satir{ padding:20px; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.alt-sag{ position: relative; background: #e64d53; margin-top:-10px; }
.alt-sag::after{ position: absolute; content: ""; border-top:30px solid #efa6a9; border-right:30px solid #efa6a9; border-bottom:30px solid #e0e0df; border-left:30px solid #e0e0df; bottom:0px; }
.gorus-form label{ text-align: right; float:left; width: 100px; padding: 5px 10px 0 0; font-size: 1.2em; color:#fff; font-family: sans-serif; }
.gorus-form input[type="text"],.gorus-form textarea{ width: 300px; padding:10px; background: #efa6a9; border:none; }
.gorus-form textarea{ height: 150px; }
.gorus-form input[type="submit"]{ background: #93dc61; float: right; padding:10px; border:none; margin-bottom:50px; }
.form-satir{ padding:20px; }
|
15.Adım: bazı etiketlerde font-family, margin, padding değerleri ortak olduğu için bir araya toplanıp CSS dosyası boyutu kısaltılabilir.
CSS ile WEB SAYFASI TASARIMINI INDIRIN : HTML SAYFA TASARIMI
Beğendim!
İlgili
www.yazilimbilisim.net
CSS ile Web Sayfası Oluşturma – Sayfa 3 – Yazılım Bilişim Programlama
Günümüzde web sayfalarında CSS3 ile ( hatta CSS4 yolda ) temel bir çok görsel rahatlıkla oluşturmak mümkün. Bu yazıda CSS’nin önemli bir kaç özelliği ile sade bir site oluşturacağız. Oluşturacağımız sitenin tasarımı şu şekilde olacak.
Öncelikle tasarımı inceleyip nerede hangi div etiketlerini kullanacağız ona karar vermeliyiz. Tasarıma geçmeden biraz inceleyip, tasarımın kaç parçadan oluştuğunu çıkarmalıyız. Görece olarak farklılık göstermesine rağmen ben 4 ana parçaya ayırdım.
Bir de küçük bir not. Oluşturacağımız site DIV etiketleri ile yapılacaktır. Tablosuz sayfa tasarımı yapacağız.
Tabi bu sayfaların içinde de gruplanmış başka div etiketlerini oluşturdum. Sayfanın taslağı şu şekilde oluştu.
Biraz daha detay eklediğimizde sayfanın hemen hemen tüm parçaları oluşturuldu.
Daha da fazla detaylandırılabilir ancak şimdilik bu bu kadar yeterli olacaktır. Sonraki sayfaya geçerek CSS Sayfa tasarımına başlayabiliriz.
Sayfa tasarımında kullanılacak görseller: css-site-tasarimi-resim indir
1.Adım: Her sayfada olması gereken temel kodları yazarak tasarıma başlıyoruz. Bu kodların yanında bir de tasarımda kullanmak için bir tane sitil dosyası oluşturup bağlantısını yapalım.
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="tasarim.css" rel="stylesheet"> <title>YAZILIM BİLİŞİM</title> </head> <body> ……….. </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="tasarim.css" rel="stylesheet"> <title>YAZILIM BİLİŞİM</title> </head> <body> ……….. </body> </html>
|
2.Adım: 4 temel parçayı ve oluşturan div etiketlerini body içine yazıyoruz. Sadece alt bölümü dışarı aldım. Orta bölümün aşağı doğru tekrar etmesi durumunda arka plan oturmayacaktı. Body etiketi ve içindekiler şu şekilde oldu.
<body> <div> <div> ………. </div> <div>……….</div> <div>………</div> </div> <div>………</div> </body>
<body> <div> <div> ………. </div> <div>……….</div> <div>………</div> </div> <div>………</div> </body>
|
3.Adım: Üst kısıma site adı, slogan ve menü için gerekli divleri oluşturuyoruz.
<div> <div></div> <div></div> <div></div> </div>
<div> <div></div> <div></div> <div></div> </div>
|
4.Adım: Bu adımda site adını, sloganı ve menü (ul li a) için gerekli olan kodları yazarak devam edelim. Site ismi üzerine tıkladığımızda Giriş sayfasına gideceğini düşünürsek bu kısmın bir bağlantı olması gerekecektir. Üst kısım için gerekli kodlar şu şekilde oluşacaktır.
<div> <div> <a href="index.html"> <h2>YAZILIM BİLİŞİM</h2> </a> </div> <div><p>Bir Tasarım Hikayesi</p></div> <div> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Biz Kimiz</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div> <div> <a href="index.html"> <h2>YAZILIM BİLİŞİM</h2> </a> </div> <div><p>Bir Tasarım Hikayesi</p></div> <div> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Biz Kimiz</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </div>
|
Tasarım şu şekilde olacaktır. CSS kısmına geçtiğimizde görüntü çok daha iyi olacaktır.
5.Adım: Şu aşamada CSS tasarımı yapacağız. tasarim.css sayfasına geçip genel ve üst bölümün tasarımını yapıyoruz.
Body etiketinin varsayılan boşluklarını kaldırmak margin:0 yaptık. Sayfanın arka plan resmi ve arka plan rengini ayarlıyoruz..
Arka plan resmi sadece yatayda tekrar edeceği için repeat-x özelliğini de eklenir.
Link etiketlerinin altındaki çizgiyi kaldırmak için tüm a etiketlerinin alt çizgisini kaldırıyoruz.
Sayfa divinin genişliğini 980px yapıp soldan ve sağdan ortalı olmasını sağlıyoruz.
body{ margin:0; padding:0; background: url(resim/bg.png) repeat-x #e0e0df; } a{ text-decoration: none; } .sayfa{ width: 980px; margin:auto; }
body{ margin:0; padding:0; background: url(resim/bg.png) repeat-x #e0e0df; } a{ text-decoration: none; } .sayfa{ width: 980px; margin:auto; }
|
6.Adım: site adı etiketini sayfanın ortasında istediğimiz konuma getiriyoruz. Tasarımdaki gibi gölge görüntüsünü elde etmek içinse text-shadow özelliğini kullanarak gölge efekti veriyoruz.
/* .siteadi içindeki a onun içindeki h2 etiketi */ .siteadi a h2{ text-align: center;/*yazıyı ortala*/ margin:35px 0 0 0; padding:0; font-size:4em; font-family: sans-serif; color:#868686; text-shadow: #4c4b4b -1px -1px,#fff 1px 1px; }
/* .siteadi içindeki a onun içindeki h2 etiketi */ .siteadi a h2{ text-align: center;/*yazıyı ortala*/ margin:35px 0 0 0; padding:0; font-size:4em; font-family: sans-serif; color:#868686; text-shadow: #4c4b4b -1px -1px,#fff 1px 1px; }
|
7.Adım slogan görüntüsünü elde etmek için de aşağıdaki kodları yazarız. Kodlama yaparken bazı temel kodları tekrar tekrar yazdığımı farkettim. Tasarıma başlamadan önce css reset dökümanı kullanırsanız ya da oluşturursanız. Margin:0 padding:0 gibi kodları defalarca yazmak zorunda kalmazsınız.
.slogan p{ padding:0; margin:0; text-align: right; padding-right: 240px; color:#3376a6; font-size: 1.2em; font-family: sans-serif; font-style: italic; }
.slogan p{ padding:0; margin:0; text-align: right; padding-right: 240px; color:#3376a6; font-size: 1.2em; font-family: sans-serif; font-style: italic; }
|
8.Adım: Menünün tasarımı için öncelikle menünün hizasını ayarlıyoruz.
Ul etiketinin başındaki madde imlerini kaldırmak için list-style değerini kaldırıyoruz. Ul etiketinin varsayılan iç ve dış boluklarını kaldırmak için margin ve padding değerlerini de kaldırıyoruz.
Sonra eşit aralıklarla menü etiketlerini(li) sola hizalı olarak(float:left) dağıtıyoruz. Linklerin yanında bulunan çizgileri border olarak ekliyoruz. Yalnız ilk ve son etiketteki kenarlıkları kaldırmak gerekiyor. bunun için sözde etiket kullanmak gerekiyor. li:first-child li:last child etiketlerini kullanarak gerekli düzenlemeleri yapıyoruz.
Link(a) etiketi içinde bulunduğu alanı tamamen kaplaması için display özelliğini block yapıyoruz. Mavi alanı tamamen kaplaması için sabit yükseklik verip, verdiğim sabit yükseklik değeri kadar satır yüksekliği değeri veriyorum. Diğer ayarlamalar ekrandaki yazı şekline ait olan ayarlamalar.
Belki linkerin üzerine geldiğimizde farklılık elde etmek isteyebiliriz. Bunun içinde a:hover seçicisini kullanıyoruz.
.ust-menu{ margin-top:26px; } .ust-menu ul{ list-style: none; margin:0; padding:0; } .ust-menu ul li{ float: left; border-left:#a8c5de solid 1px; border-right:#92afc8 solid 1px; } .ust-menu ul li:first-child{ border-left:none; } .ust-menu ul li:last-child{ border-right:none; } .ust-menu ul li a{ display: block; height: 50px; line-height: 50px; padding:0 40px; font-size: 1.2em; font-family: sans-serif; color:#fff; } .ust-menu ul li a:hover{ background: #336fa4; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.ust-menu{ margin-top:26px; }
.ust-menu ul{ list-style: none; margin:0; padding:0; }
.ust-menu ul li{ float: left; border-left:#a8c5de solid 1px; border-right:#92afc8 solid 1px; }
.ust-menu ul li:first-child{ border-left:none; }
.ust-menu ul li:last-child{ border-right:none; }
.ust-menu ul li a{ display: block; height: 50px; line-height: 50px; padding:0 40px; font-size: 1.2em; font-family: sans-serif; color:#fff; }
.ust-menu ul li a:hover{ background: #336fa4; }
|
Görüntü şekildeki gibi oluşacaktır.
9.Adım: Slider paneli için sadece alanın yüksekliğini ayarlayıp içine bir tane resim ekleyeceğiz. Tasarım bittikten sonra bir tane jquery slider ekleriz.
***Menü içindeki li etiketlerini sola hizalı yaptığımız için slider ile menü arasına temizle adında bir tane div atıp buna clear both ekleyip daha yukarı kaymayı engelliyoruz.
<div></div> <div> <img src="resim/slider.png"> </div>
<div></div> <div> <img src="resim/slider.png"> </div>
|
.slider{ height: 338px; text-align: center; } /*tasarımın en altına koyarsanız daha iyi olur*/ .temizle{ clear: both; }
.slider{ height: 338px; text-align: center; }
/*tasarımın en altına koyarsanız daha iyi olur*/
.temizle{ clear: both; }
|
10.Adım: Orta kısımda sol ve sağ bölümler bulunmakta. Sol kısımdaki etiketleri oluşturuyoruz.
<div> <div> <div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div> <div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div> </div> <div> .........</div> </div> <div></div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div> <div>
<div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div>
<div> <img src="resim/resim.png"> <h3>ÜRÜN BAŞLIĞI</h3> <div>Ürün hakkında özet bilginin yer aldığı bölüm daha fazla detay için açıklamanın altında bulunan daha fazla linkine tıklayarak daha fazla bilgi alabilirsiniz.<a href="#">Daha >>></a></div> <div></div> </div>
</div> <div> .........</div>
</div> <div></div>
|
11.Adım: sol ve sağ kısım için gerekli CSS düzenlemesini yapıp ürün tasarımı tasarımdaki gibi yapıyoruz. Toplam genişliğin 980px olduğunu hatırlayarak genişlik değerini veriyoruz. Yan yana gelmeleri için float:left değerini de ekliyoruz. (Not: alt bölümle orta bölüm arasıda temizle etiketi eklemeyi unutmayın)
Ürün resmi ürün başlığının solunda ve ürün başlığının hemen altında ürün detayı görünüyor. Ürün detayının sonda da daha fazla linki bulunmaktadır.
.orta-sol{ width: 680px; float:left; } .urun{ padding:10px ; background: #d8f2be; margin:10px 10px 0 0; } .urun-resim{ float:left; margin:0 10px 10px 0; } .urun-baslik{ margin:0px; font-family: sans-serif; font-size: 1.6em; color:#4a6f55; } .urun-ozet{ margin-top:10px; font-family: sans-serif; font-size: 1em; line-height: 1.6em; color:#5e7b67; } .urun-ozet a{ color:#207eae; } .orta-sag{ float:left; width: 300px; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.orta-sol{ width: 680px; float:left; }
.urun{ padding:10px ; background: #d8f2be; margin:10px 10px 0 0; }
.urun-resim{ float:left; margin:0 10px 10px 0; }
.urun-baslik{ margin:0px; font-family: sans-serif; font-size: 1.6em; color:#4a6f55; }
.urun-ozet{ margin-top:10px; font-family: sans-serif; font-size: 1em; line-height: 1.6em; color:#5e7b67; }
.urun-ozet a{ color:#207eae; }
.orta-sag{ float:left; width: 300px; }
|
Ekran görüntüsü aşağıdaki gibi olacaktır.
resim
12.Adım: Sağ kısımda bulunan paneller için orta bir panel başlığı ve panel bölümü oluşturup farklı çalışmalarda kullanmak mümkün olacaktır. Aşağıdaki şekilde panelin Popüler Ürünler için bir panel galeri için 2. Paneli oluşturuyoruz. 2. Panel Jquery kullanarak resim gösterme paneli olacak. Şimdilik bir tane resim eklemek yeterli olacaktır.
HTML:
<div> <div> <div> <h3>POPÜLER ÜRÜNLER</h3> </div> <div> <div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div> <div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div> </div> </div> <div> <div> <h3>GALERİ</h3> </div> <div> <div > <img src="resim/resim.png"> </div> </div> </div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div> <div> <div> <h3>POPÜLER ÜRÜNLER</h3> </div> <div>
<div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div>
<div> <a href="#"> <img src="resim/resim.png"> <h4>ABCD KİMYASAL TEMİZLİK MADDESİ</h4> </a> <div></div> </div>
</div> </div>
<div> <div> <h3>GALERİ</h3> </div> <div> <div > <img src="resim/resim.png"> </div>
</div> </div> </div>
|
CSS:
.panel{ background: #fcb8b8; margin:10px 0 10px 10px; } .panel-baslik{ background: #fc5151; } .panel-baslik h3{ margin:0px; height: 50px; line-height: 50px; text-align: center; font-family: sans-serif; color:#fff; font-weight: 400; } .panel-bolum .populer{ border-bottom:#fc5151 solid 1px; padding-bottom:10px; margin:0 10px 0 10px; } .panel-bolum .populer img{ padding:0 10px 10px 0; float:left; width: 90px; } .panel-bolum .populer h4{ color:#fff; font-family: sans-serif; line-height: 30px; font-weight: 400; font-size: 1em; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.panel{ background: #fcb8b8; margin:10px 0 10px 10px; }
.panel-baslik{ background: #fc5151; }
.panel-baslik h3{ margin:0px; height: 50px; line-height: 50px; text-align: center; font-family: sans-serif; color:#fff; font-weight: 400; }
.panel-bolum .populer{ border-bottom:#fc5151 solid 1px; padding-bottom:10px; margin:0 10px 0 10px; }
.panel-bolum .populer img{ padding:0 10px 10px 0; float:left; width: 90px; }
.panel-bolum .populer h4{ color:#fff; font-family: sans-serif; line-height: 30px; font-weight: 400; font-size: 1em; }
|
13.Adım: alt kısmı oluştururken hemen üzerindeki kırmızı alanı kenarlık olarak yapıp, alanın ortalanması için içine .ortala adında bir div ekliyorum. Sonrada sol ve sağ bölümler içinde yaptığım gibi sola ve sağa hizalamalar ile alt kısmı oluşturuyorum.
HTML:
<div></div> <div> <div> <div> <div> <h3>Popüler Ürünler</h3> <ul> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> </ul> </div> <div> <h3>Sosyal</h3> <ul> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> </ul> </div> </div> <div>x</div> </div> <div></div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div></div> <div> <div> <div> <div> <h3>Popüler Ürünler</h3> <ul> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> <li><a href="#">Ürün Başlığı</a></li> </ul> </div> <div> <h3>Sosyal</h3> <ul> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> <li><a href="#"><img src="resim/resim.png"></a></li> </ul> </div> </div> <div>x</div>
</div>
<div></div> </div>
|
CSS:
.alt{ border-top:#e64d53 solid 10px; background: #e0e0df; padding:10px 0 50px 0; } .ortala{ width: 980px; margin:auto; } .alt-sol{ width: 480px; float:left; } .alt-sag{ width: 480px; float:right; } .bolum-1,.bolum-2{ float: left; width: 230px; } .alt-sol h3,.alt-sol ul a{ font-family: sans-serif; color:#e64d53; } .alt-sol ul{ list-style: none; padding:0; margin:0; } .alt-sol ul li{ padding:5px 0 5px 0; } .alt-sol ul a{ text-decoration: none; } .alt-sol .alt-menu li{ padding-left:20px; background: url(resim/nokta.png) no-repeat 0 7px; } .alt-sol .sosyal-menu img{ width: 80px; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.alt{ border-top:#e64d53 solid 10px; background: #e0e0df; padding:10px 0 50px 0; }
.ortala{ width: 980px; margin:auto; }
.alt-sol{ width: 480px; float:left; } .alt-sag{ width: 480px; float:right; } .bolum-1,.bolum-2{ float: left; width: 230px; } .alt-sol h3,.alt-sol ul a{ font-family: sans-serif; color:#e64d53; }
.alt-sol ul{ list-style: none; padding:0; margin:0; } .alt-sol ul li{ padding:5px 0 5px 0; }
.alt-sol ul a{ text-decoration: none; } .alt-sol .alt-menu li{ padding-left:20px; background: url(resim/nokta.png) no-repeat 0 7px; } .alt-sol .sosyal-menu img{ width: 80px; }
|
14.Adım: alt bölümdeki sağ kısmı oluşturmak için gerekli olan html ve css kodları
HTML:
<div> <div> <form> <div> <label for="mail">MAIL</label> <input type="text" name="mail"> </div> <div> <label for="gorus">GÖRÜŞ</label> <textarea name="gorus"></textarea> </div> <div> <input type="submit" value="KAYDET"> </div> </form> </div> <div></div> </div>
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div> <div> <form> <div> <label for="mail">MAIL</label> <input type="text" name="mail"> </div> <div> <label for="gorus">GÖRÜŞ</label> <textarea name="gorus"></textarea> </div> <div> <input type="submit" value="KAYDET"> </div> </form> </div> <div></div> </div>
|
CSS:
.alt-sag{ position: relative; background: #e64d53; margin-top:-10px; } .alt-sag::after{ position: absolute; content: ""; border-top:30px solid #efa6a9; border-right:30px solid #efa6a9; border-bottom:30px solid #e0e0df; border-left:30px solid #e0e0df; bottom:0px; } .gorus-form label{ text-align: right; float:left; width: 100px; padding: 5px 10px 0 0; font-size: 1.2em; color:#fff; font-family: sans-serif; } .gorus-form input[type="text"],.gorus-form textarea{ width: 300px; padding:10px; background: #efa6a9; border:none; } .gorus-form textarea{ height: 150px; } .gorus-form input[type="submit"]{ background: #93dc61; float: right; padding:10px; border:none; margin-bottom:50px; } .form-satir{ padding:20px; }
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.alt-sag{ position: relative; background: #e64d53; margin-top:-10px; }
.alt-sag::after{ position: absolute; content: ""; border-top:30px solid #efa6a9; border-right:30px solid #efa6a9; border-bottom:30px solid #e0e0df; border-left:30px solid #e0e0df; bottom:0px; }
.gorus-form label{ text-align: right; float:left; width: 100px; padding: 5px 10px 0 0; font-size: 1.2em; color:#fff; font-family: sans-serif; }
.gorus-form input[type="text"],.gorus-form textarea{ width: 300px; padding:10px; background: #efa6a9; border:none; }
.gorus-form textarea{ height: 150px; }
.gorus-form input[type="submit"]{ background: #93dc61; float: right; padding:10px; border:none; margin-bottom:50px; }
.form-satir{ padding:20px; }
|
15.Adım: bazı etiketlerde font-family, margin, padding değerleri ortak olduğu için bir araya toplanıp CSS dosyası boyutu kısaltılabilir.
CSS ile WEB SAYFASI TASARIMINI INDIRIN : HTML SAYFA TASARIMI
Beğendim!
İlgili
www.yazilimbilisim.net
html - CSS Floating Footer?
.container { width: 964px; } #footer { background-color: #000000; height: auto; margin-top: 0px; bottom: 0px; } #footer-container { background-color: #000000; } #footer-container #footer { background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/footer-logo.png") no-repeat scroll 20px 23px #000; padding-bottom: 49px; } #footer .top { border-bottom: 1px solid #7F7F7F; margin-left: 82px; padding-bottom: 16px; padding-top: 33px; } #footer .text-logo { background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/text-logo.png") no-repeat croll 0 0 transparent; float: left; height: 28px; width: 176px; } #footer .slogan { background: url("http://www.me.com/common/commonspot/templates/images/chrome/logos/slogan.png") no-repeat scroll 0 0 transparent; float: right; height: 12px; margin-top: 14px; width: 259px; background-color: #000000; } #footer .links { float: left; margin-left: 81px; margin-top: 13px; } #footer .links a { color: #fff; } #footer .links li { font-size: 12px; font-weight: bold; margin-bottom: 13px; text-decoration: underline; } #footer .social { float: right; margin-left: 37px; margin-right: 5px; margin-top: 14px; } #footer .social li { margin-bottom: 7px; text-decoration: underline; } #footer .social a { color: #FFFFFF; font-size: 12px; padding-left: 26px; } #footer .social .facebook { background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px 4px transparent; } #footer .social .twitter { background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 0px -20px transparent; } #footer .social .youtube { background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -42px transparent; padding-left: 15px; } #footer .social .itunes { background: url("http://www.me.com/common/commonspot/templates/images/chrome/utils/social_v2.png") no-repeat scroll 4px -66px transparent; padding-left: 15px; } #footer .updated { clear: right; color: #9B9B9B; float: right; font-size: 10px; margin-top: 14px; } #footer-container ul li { text-align: left } <div align="center" background-color="#000000" ;> <div> <div> <a href="http://www.me.com/"> <div></div> </a> <div></div> </div> <ul> <li><a href="/faqs.htm">Frequently Asked Questions</a> </li> <li><a href="/aboutus/website-policies.htm">Website Policies</a> </li> <li><a href="/contacts.htm">Contact Us</a> </li> </ul> <ul> <li><a href="http://www.youtube.com/user/Mywebsite">YouTube</a> </li> <li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtistLegacy?cc=us&id=216751324">iTunes</a> </li> </ul> <ul> <li><a href="http://www.facebook.com/mywebsite">Facebook</a> </li> <li><a href="http://twitter.com/mywebsite">Twitter</a> </li> </ul> <div> <p>Last Updated: 03/06/2015</p> </div> </div> <!--! end of #footer--> </div> <!--! end of #footer-container -->stackoverflow.com
Responsive facebook style homepage, registration and login design with twitter bootstrap 3.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Responsive facebook like homepage, Registration and login with twitter bootstrap 3.0 - wsnippets.com</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div>
<div>
<div>
<div>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
<span></span>
<span></span>
</button>
<a href="http://wsnippets.com">wsnippets.com</a>
</div>
<div>
<form role="form">
<div>
<div>
<label for="exampleInputEmail2">Email or Phone</label>
<input type="email" placeholder="Email or Phone">
</div>
<div>
<label for="exampleInputPassword2">Password</label>
<input type="password" placeholder="Password">
</div>
<div>
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</div>
<div>
<div>
<div>
<h4>
Facebook helps you connect and share with the people in your life.
</h4>
<img src="img/background.png" />
</div>
<div>
<form action="#" method="post" role="form">
<legend><a>Create your account</a></legend>
<h5>It's free and always will be.</h5>
<div>
<div>
<input name="firstname" placeholder="First Name" type="text" autofocus />
</div>
<div>
<input name="lastname" placeholder="Last Name" type="text" />
</div>
</div>
<input name="youremail" placeholder="Your Email" type="email" />
<input name="reenteremail" placeholder="Re-enter Email" type="email" />
<input name="password" placeholder="New Password" type="password" />
<label for="">
Birth Date</label>
<div>
<div>
<select>
<option value="Month">Month</option>
</select>
</div>
<div>
<select>
<option value="Day">Day</option>
</select>
</div>
<div>
<select>
<option value="Year">Year</option>
</select>
</div>
</div>
<label>
<input type="radio" name="sex" value="male" />
Male
</label>
<label>
<input type="radio" name="sex" value="female" />
Female
</label>
<br />
<span>By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span>
<button type="submit">
Create my account</button>
</form>
</div>
</div>
</div>
</div>
<div>
<div>
<p><a href="http://wsnippets.com">WSnippets.com</a></p>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
wsnippets.com
HTML div and span tags
Tags are great for displaying whatever content you need -- like the <p> tag for paragraphs, or the <img> tag for images. But what if you need to group a tag or a set of tags inside one container to create some kind of relationship on a webpage? Like a set of links and an image for a menu, or all the text on the page for the content.
This tutorial focuses on:
- Grouping content
- The <div> tag
- The <span> tag
- Div vs. Span
- div, span, and CSS
Grouping content
Grouping of content is one of those things that happens behind the scenes at a website. You see a webpage, but you do not know how the author of that webpage set up relationships between the various items on the page. Doing so is important for styling as well as for a logical organization.
On this webpage, we have five containers that group together a set of elements:
- Header The top part of this page. It contains the site name, slogan, search box, and top menu.
- Left side navigation The left side of this page. It contains the menu for this sites content.
- Content The center of this page. It contains the actual content of the page.
- Right side navigation The right side of this page. It contains some more of the menu for this sites content, the things we could not fit on the left side.
- Footer The footer of this page. It contains links that are generally reserved for the footer of a webpage such as 'copyright information', 'terms of use', and a copyright statement and a few images related to the validation of the construction of this webpage.
The <div> tag
The <div> tag is a container for a group of elements. It is not seen on a webpage, but works behind the scenes to organize the layout of a webpage a certain way.
Div is a block-level element which means that it will automatically begin on a new line in the browser. This is opposed to inline elements which continue on the same line.
Example to illustrate the difference between block level and inline elements:<p>The a tag is an inline element. We will display two links. Notice how they continue on the same line next to each other</p> <a href="#">This is a link</a> <a href="#">This is another link</a> <p>The p tag is a block-level element. Notice how it begins on a new line, apart from the link</p>
Output:The a tag is an inline element. We will display two links. Notice how they continue on the same line next to each other This is a link This is another link The p tag is a block-level element. Notice how it automatically begins on a new line, apart from the linkNOTE: Browsers will automatically place a line break before and after a div element.
NOTE: You cannot include the <div> tag inside the <p> tag.
Attributes of the <div> tag- id - Denotes a unique name for the container.
- class - Denotes what class this container belongs to (This attribute as well as id is used for styling purposes. For more on styling, read our HTML stylesheets page or our CSS tutorials)
- style - Sets a set of styles using for this container such as background color, font size, and border color.
- Deprecated. align - Sets how content will be aligned inside the container. Possible values include "left, "right", "center", or "justify"
<div> <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> </div>
In the above example, we placed a set of related links in a <div> called 'menu'
We can now give our menu it's own unique background color to differentiate it from the rest of the page. We'll use the style attribute for this:
<div > <a href="index.html">Home</a> | <a href="about.html">About Us</a> | <a href="faq.html">FAQ</a> | <a href="contact.html">Contact Us</a> </div>
In the above example, the background color differentiates the menu from the rest of the page in some way. This makes it clear that this is not just some links on the page, but a set of elements that have some kind of relationship within that container. It is this grouping of content that makes it easier for the user to navigate a webpage, and understand what is what.
The <span> tag
The <span> tag is similar to but different from the <div> tag. Unlike the <div> tag for which the browser will place a line break before and after a div element, there is no such formatting for the <span> tag.
While the <div> tag should be used for grouping a set of related elements to create a relationship between them on a webpage, the <span> tag should be used to change the style of something on a webpage without affecting the context it is within.
NOTE: Div is a block-level element, while span is an inline element.
Attributes of the <span> tag- id - Denotes a unique name for this span element.
- class - Denotes what class this span element belongs to (This attribute as well as id is used for styling purposes. For more on styling, read our HTML stylesheets page or our CSS tutorials)
- style - Sets a set of styles using CSS attributes for this span element such as background color, font size, and border color.
<p> stands for Hyper Text Markup Language</p>
Output:HTML stands for Hyper Text Markup Language
Notice how only the word 'HTML' is blue and bold in the above example. This is because we set it that way using the <span> tag. The <span> tag is effective this way because it can be used to change just part of an element instead of that entire element.
div vs. span
The <div> tag should be used to separate the contents of a webpage into several parts based on the relationships between the elements on the webpage. The <div> tag should be used for grouping content. Use the <div> tag for things such as columns in a layout, and the location of a menu on a page. The <span> tag should be used to change the style of something on a webpage without affecting the context it is within.
div, span, and CSS
Not just for grouping sets of related tags or setting apart individual elements on a webpage, the <div> and <span> tags are actually an integral part of styling the layout of webpages.
The <div> tag is used much more than the <span> tag, but the <span> tag still plays an important role in building webpages.
An entire page using div and span:<html> <head> <title>div and span layout</title> </head> <body> </body> </html>
In the above example, we create a layout with two columns with various styling. We divide the page into two columns (leftMenu and rightMenu) using the <div> tag, and we use the <span> tag to change the color of two words.
The <div> tags divide the page into two columns (one column is a menu for the page and the other column is the page's content). The styling we used is in CSS commands. CSS is a separate language, to learn more about it check out our CSS tutorials. To learn more about using tags to apply a set of styles to a webpage check out HTML stylesheets page.
www.landofcode.com
Tasarim-Sepeti tr.gg Tasarimlari - Blog Tasarımı
Blog Teması
Tasarımın Üstündeki Metin:
<div> <h2><a href="SİTE URL GİR" _fcksavedurl="SİTE URL GİR">SİTE SLOGAN GİR</a></h2> <h3><span>SİTE ALT SLOGAN GİR</span></h3> <div> <ul> <li><a href="ANASAYFA URL GİR" _fcksavedurl="ANASAYFA URL GİR">Anasayfa</a></li> <li><a href="HAKKIMDA BÖLÜM URL'Sİ GİR" _fcksavedurl="HAKKIMDA BÖLÜM URL'Sİ GİR" title="Hakkımda Bilgiler">Hakkımda</a></li> </ul> </div> </div> <div> <div> <h4>SİTE BAŞLIĞI GİR</h4>
Tasarımın Altındaki Yazı:<div> <div> ALT SLOGAN GİR </div> </div> <div> <a href="#" _fcksavedurl="#"></a> <a href="#" _fcksavedurl="#"></a> </div> </div> <div> <div> <form method="get" action="http://www.google.com.tr/"> <p><input value="Arayacağın Terimler..." name="s" onfocus_fckprotectedatt="%20onfocus%3D%22if(this.value%3D%3D'Arayaca%26%23287%3B%26%23305%3Bn%20Terimler...')this.value%3D''%22" onblur_fckprotectedatt="%20onblur%3D%22if(this.value%3D%3D'')this.value%3D'Arayaca%26%23287%3B%26%23305%3Bn%20Terimler...'%22" type="text"> <input value="ARA" type="submit"></p> </form> </div> <div> <h4>Kategoriler</h4> <ul> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> <ul> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> </li> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> <ul> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> </li> </ul> </li> </ul> </li> <li><a href="KATEGORİ URL GİR" _fcksavedurl="KATEGORİ URL GİR" title="">KATEGORİ GİR</a> </li> </ul> </div> <div> <h4>Yazılar</h4> <ul> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR">BAŞLIK GİR</a></li> </ul> </div> <div> <h4>HOŞGELDİNİZ</h4> <img src="" _fcksavedurl="" alt=""> <p>Merhaba, bloguma hoşgeldiniz.Umarım blogumu beğenirsiniz...</p> </div> <div> <h4>Ekstralar</h4> <ul> <li><a href="BAŞLIK GİR" _fcksavedurl="BAŞLIK GİR">BAŞLIK GİR</a></li> <li><a href="BAŞLIK GİR" _fcksavedurl="BAŞLIK GİR" title="">BAŞLIK GİR <abbr title=""></abbr></a></li> <li><a href="BAŞLIK GİR" _fcksavedurl="BAŞLIK GİR"><abbr title="">BAŞLIK GİR</abbr></a></li> <li><a href="URL GİR" _fcksavedurl="URL GİR" title="">BAŞLIK GİR</a></li> </ul> </div> </div> </div> <div> <div><a href="" _fcksavedurl=""><img src="" _fcksavedurl="" alt=""></a></div> <div> <p> Sitelere Özel Tasarım Yapılır. <a href="" _fcksavedurl=""> Fiyatı 5 TL'dir. </a> | <a href="" _fcksavedurl="">Tasarım İletişim</a> <a href="" _fcksavedurl=""></a> </p> <p>Copyright By MHD © 2013. Her Hakkı Saklıdır. | <a href="http://tr-gg-css-king.tr.gg/" _fcksavedurl="http://tr-gg-css-king.tr.gg/"> Tasarımı Hazırlayan</a></p> </div></div>
CSS Kodu:
h2#title{display: none;} h3#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} /* Theme Name: japan-style Description: japan-style Wordpress Theme by<a href="http://blog.gooddesignweb.com/" _fcksavedurl="http://blog.gooddesignweb.com/">Good Design Web</a> Version: 1.1 Author: Good Design Web Author URI: http://blog.gooddesignweb.com/ Tags: fixed width, two columns, right sidebar, valid XHTML, valid CSS */ /* Reset -------------------------------------------------------------------*/ * { padding: 0; margin: 0; } ul li, ol li { list-style: none; list-style-position: inside; } ol ol, ul ul, ol ul, ul ol { margin-left: 20px; margin-bottom: 0; } img { border: none; } /* Body -------------------------------------------------------------------*/ body { font: 12px/18px Verdana, Helvetica, Arial, Geneva, sans-serif; color: #333; background: #DED5BA; } h2, h3, h4, h5, h5, h6 { font-family: "Trebuchet MS", Helvetica, Arial, Geneva, Sans-Serif; color: #414d4c; } h2 { font-size: 22px; line-height: 26px; margin-bottom: 10px; } h3 { font-size: 12px; line-height: 24px; margin-bottom: 7px; font-weight: normal; } h4 { font-size: 18px; line-height: 22px; margin-bottom: 5px; } h5 { font-size: 16px; line-height: 20px; margin-bottom: 5px; } h5 { font-size: 14px; line-height: 18px; margin-bottom: 5px; } h6 { font-size: 12px; line-height: 16px; margin-bottom: 5px; } h2 span { color: #999; } a { color: #3b5a4a; } a:hover { color: #3b5a4a; } a:visited { color: #3b5a4a; } p { margin-bottom: 10px; } input, textarea { font: 12px Verdana, Helvetica, Arial, Geneva, sans-serif; } blockquote { font: italic 14px/22px Georgia, Serif; padding: 5px 10px; margin-bottom: 20px; background: #e4ede2; } /* Header -------------------------------------------------------------------*/ #header { width: 960px; height: 300px; margin: 0 auto; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/header_bg.jpg) no-repeat center; position: relative; } #header h2 { width: 230px; position: absolute; top: 80px; left: 160px; font: 20px Verdana; padding-top: 10px; margin-bottom: 0; color: #fff; } #header h2 a { color: #333; text-decoration: none; } #header span { position: absolute; top: 195px; left: 150px; padding-left: 10px; font-size: 12px; color: #333; } /* Container -------------------------------------------------------------------*/ #wrapper { width: 900px; overflow: hidden; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/container_bg.jpg) repeat-y; margin: 0 auto; } /* Navigation -------------------------------------------------------------------*/ #navi { width: 800px; height: 45px; margin-left: 30px; position: relative; top: 225px; } #navi ul { margin-left: 10px; position: absolute; bottom: -1px; overflow: hidden; height: 45px; } #navi ul li { float: left; margin-right: 3px; padding-left: 3px; font-weight: bold; } #navi ul li.current_page_item { width: 122px; height: 45px; } #navi ul li a { width: 122px; height: 45px; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/nav_bg.jpg) no-repeat; display: block; text-decoration: none; color: #333; line-height: 45px; text-align: center; } #navi ul li a:hover { color: #555; } #navi ul li.current_page_item a { background: url(http://wp-themes.com/wp-content/themes/japan-style/images/nav_bg.jpg) no-repeat; color: #ff0000; } /* Content -------------------------------------------------------------------*/ #conttent { width: 600px; float: left; padding: 15px; } #conttent .post { margin-bottom: 40px; } #conttent .post p { margin-bottom: 20px; } #conttent .post h4 a { text-decoration: none; font-size: 20px; padding-left: 20px; } #conttent .post-list li { list-style: none; } #conttent .post .post-info { clear: both; font-size: 11px; color: #777; padding: 15px 5px 5px 5px; margin-bottom: 20px; text-align: right; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/meta_bg.gif) top center no-repeat; } #conttent .post .post-info a { color: #333; text-decoration:none; } #conttent .post .post-info a:hover { color: #555; text-decoration:none; } #conttent #pages { text-align: center; } #conttent #pages a { font: bold 20px "Trebuchet MS"; color: #414d4c; text-decoration: none; } #conttent #pages a:hover { color: #1e2726; } #conttent ul, ol, dl { margin-bottom: 20px; } #conttent ul { list-style: disc; list-style-position: inside; } #conttent ol { list-style: decimal; list-style-position: inside; } #conttent dl dt { font-weight: bold; } #conttent dl dd { font-style: italic; margin: 0 0 5px 20px; color: #555; } .aligncenter { margin-left: auto; margin-right: auto; } .alignleft { float: left; margin: 5px 15px 10px 0; } .alignright { float: right; margin: 5px 0 10px 15px; } /* Sidebar -------------------------------------------------------------------*/ #sidebar { width: 235px; float: right; font-size: 11px; margin: 0 10px 10px 0; color: #555; } #sidebar h4 { font: normal 18px Verdana, Arial, Sans-Serif; color: #444; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/sidetitle_bg.gif) no-repeat; padding-left: 23px; } #sidebar a { color: #38463e; text-decoration: none; } #sidebar a:hover { color: #38463e; } #sidebar .block { width: 205px; padding: 15px; border-bottom: 1px solid #bfccbf; overflow: hidden; color: #555; } #sidebar .block li { background: url(http://wp-themes.com/wp-content/themes/japan-style/images/arrow.gif) no-repeat 2px 8px; padding-left: 12px; } #sidebar .block a:hover { color: #777; } /* Calendar */ #sidebar .block #calendar_wrap a { } #sidebar .block #calendar_wrap .pad { background: none; } #sidebar .block #calendar_wrap #prev { background: none; } #sidebar .block #calendar_wrap #next { background: none; } #sidebar .block #calendar_wrap table { width: 100%; margin: 0;padding: 0;} #sidebar .block #calendar_wrap table th { width: 14.2%; } #sidebar .block #calendar_wrap table td { width: 14.2%; background: #d6ded4; text-align: center; color: #888; } /* Search -------------------------------------------------------------------*/ #search { } #search input { border: 0; } #search #s { width: 150px; height: 26px; padding: 3px 0 4px 5px; margin-right: -4px; vertical-align: top; line-height: 0; font: normal 12px Verdana; vertical-align: top; color: #333; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/search_bg.jpg) no-repeat; } #search #searchsubmit { width: 56px; height: 26px; text-align: center; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/searchbt_bg.jpg) no-repeat; font-weight: bold; } .bt{ cursor: pointer; } /* Comments -------------------------------------------------------------------*/ .comments-title { text-align: center; font: bold 17px "Trebuchet MS", Helvetica, Arial, Geneva; color: #414d4c; } #comments .comment { background: #E7E8EB; margin-bottom: 10px; overflow: hidden; width: 600px; padding-bottom: 5px; } #comments .comment .comment-avatar { float: left; width: 50px; padding: 5px 7px; } #comments .comment .comment-content { float: left; padding: 10px 15px; margin: 5px 5px 0 0; width: 500px; background: #F7F8F9; } #comments .comment .comment-content a { color: #444; } #comments .comment .comment-info { font-size: 11px; color: #777; margin-bottom: 5px; } #comments .comment .comment-info span { font: bold 16px "Trebuchet MS", Helvetica, Arial, Geneva; padding-right: 10px; margin-bottom: 5px; } #comments .comment .comment-info a { color: #444; text-decoration: none; } /* Comment Form -------------------------------------------------------------------*/ #commentform { background: #F7F8F9; border: 5px solid #E7E8EB; padding: 10px; color: #555; } #commentform p { margin-bottom: 7px; } #commentform textarea { width: 565px; border: 1px solid #aaa; height: 120px; } #commentform input.text { width: 150px; border: 1px solid #aaa; margin-right: 5px; padding: 3px 3px; } #commentform input#submit { width: 148px; height: 30px; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/submit_bg.gif) no-repeat; text-align: center; border: none; } /* Footer -------------------------------------------------------------------*/ #footer { width: 960px; height: 295px; margin: 0 auto; background: url(http://wp-themes.com/wp-content/themes/japan-style/images/footer_bg.jpg) no-repeat; position: relative; } .rss { float: right; width: 200px; height: 73px; } #footer-inner { clear: both; text-align: center; width: 900px; margin: 0 auto; padding-top: 10px; } #footer p { font-size: 11px; margin: 0; } #footer a { color: #ff0000; } aksaray haber
tasarim-sepeti.tr.gg
